​Как создать анимированный градиентный фон на сайте при помощи | Frontend Interview - собеседования по Javascript / Html / Css

​Как создать анимированный градиентный фон на сайте при помощи CSS?

Для создания анимированного градиентного фона на сайте при помощи CSS можно использовать свойство background и задать несколько градиентов в CSS. Например, можно задать два градиента и использовать анимацию для их плавного перехода друг в друга. Ниже приведен пример CSS кода:

background: linear-gradient(to right, #000000, #ffffff), linear-gradient(to right, #ffffff, #000000);
background-size: 200% 100%;
background-position: left bottom;
animation: gradient 10s ease infinite;

@keyframes gradient {
0% {
background-position: left bottom;
}
100% {
background-position: right bottom;
}
}


В этом примере мы задали два линейных градиента, которые идут друг за другом. Затем мы установили размер фона в 200% и позицию на левой стороне нижнего края. Далее мы задали анимацию gradient, которая будет длиться 10 секунд, иметь функцию плавности ease и будет повторяться бесконечно. Внутри анимации мы задали два ключевых кадра: 0%, где позиция фона находится на левой стороне нижнего края, и 100%, где позиция фона находится на правой стороне нижнего края.

@frontendInterview