Как анимировать радиальный градиент с помощью css?

@rodger.botsford 

Для создания анимации радиального градиента в CSS можно использовать свойства background и animation.

Ниже приведен пример кода, который создает радиальный градиент и анимирует его изменение:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.gradient {
  background: radial-gradient(circle at center, #ff0000, #0000ff);
  animation: gradient-animation 3s ease-in-out infinite;
}

@keyframes gradient-animation {
  0% {
    background: radial-gradient(circle at center, #ff0000, #0000ff);
  }
  50% {
    background: radial-gradient(circle at center, #0000ff, #ff0000);
  }
  100% {
    background: radial-gradient(circle at center, #ff0000, #0000ff);
  }
}

В данном примере создается элемент с классом gradient, на котором устанавливается задний фон с помощью свойства background и функции radial-gradient(). Анимация задается с помощью свойства animation, где указывается имя анимации (gradient-animation), время ее длительности (3s), функция сглаживания анимации (ease-in-out) и количество повторений (infinite).

Анимация задается с помощью правила @keyframes, где задается набор ключевых кадров и соответствующих значений свойства background. В данном случае, анимация происходит от одного радиального градиента к другому, изменяя цвета с помощью изменения порядка указания цветов в функции radial-gradient().

Это только один из возможных примеров создания анимированного радиального градиента в CSS. С помощью свойства animation можно создавать более сложные анимации, которые будут изменять не только цвета, но и другие свойства заднего фона.