Плавно меняющиеся градиентные цвета в CSS

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

Вот как это можно сделать:

1. Создайте новый массив с градиентированными цветами, например:

var gradientColors = [
  'linear-gradient(to right, #FF0000 0%, #00FF00 16.67%, #0000FF 33.33%, #FFFF00 50%, #00FFFF 66.67%, #FF00FF 83.33%, #C0C0C0 100%)',
  'linear-gradient(to right, #808080 0%, #800000 16.67%, #808000 33.33%, #008000 50%, #800080 66.67%, #008080 83.33%, #000080 100%)',
  'linear-gradient(to right, #FFFFFF 0%, #000000 100%)'
];

2. Создайте новую функцию, которая будет получать случайный градиентный цвет из массива 'gradientColors' и устанавливать его как фоновый цвет с помощью CSS анимации:

function changeBackgroundGradient() {
  var color = gradientColors[Math.floor(Math.random() * gradientColors.length)];
  document.body.style.background = color;
  document.body.style.animation = 'backgroundGradient 5s linear';
}

3. Добавьте CSS анимацию 'backgroundGradient', которая будет плавно изменять фоновый цвет:

@keyframes backgroundGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

4. Вызывайте новую функцию 'changeBackgroundGradient' вместо старой 'changeBackgroundColor' с помощью 'setInterval':

setInterval(changeBackgroundGradient, 5000);

Теперь градиентированные цвета будут плавно перемещаться каждые 5 секунд с помощью CSS анимации.