Блог

Главная - Вопросы по программированию - Как сгладить переход градиента CSS?

Как сгладить переход градиента CSS?

#html #css #css-animations #css-gradients

#HTML #css #css-анимация #css-градиенты

Вопрос:

Я создаю интерактивный сенсорный дисплей с помощью программы под названием Intuiface и создал несколько фоновых плиток / квадратов, которые я хочу сделать «живыми», медленно переключаясь между цветами.

Для этого я использовал линейно-градиентный переход в CSS, но проблема в том, что переход выглядит прерывистым. Программа использует 12 видимых плиток (это очень большой сенсорный экран).

Я пробовал использовать меньше цветов и работать на более мощных графических процессорах (я думаю, что это все равно выполняется процессором), но это не помогло.

 body {
    width: 100wh;
    height: 90vh;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

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

На данный момент анимация заметно прерывистая. Я бы хотел, чтобы переход был намного более плавным. Кто-нибудь знает, как я могу этого добиться?

Вот фрагмент кода.

 body {
  width: 100wh;
  height: 90vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
} 
 <html>

<body>
</body>

</html>

Ответ №1:

Анимация background-* свойств может быть ресурсоемкой — вы можете попробовать анимацию transform для относительно лучшей производительности — смотрите Демонстрацию ниже с использованием traslate для анимации:

 body {
  margin: 0;
}

div {
  height: 100vh;
  overflow: hidden;
}

div:after {
  content: '';
  display: block;
  width: 400vw;
  height: 400vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  50% {
    transform: translate(-300vw, -300vh);
  }
} 
 <div></div>

Ответ №2:

Поскольку ваша анимация длится 15 секунд, попытка запустить ее со скоростью 60 кадров в секунду будет означать вычисление 15 * 60 = 900 кадров.

Поскольку разница между кадром и следующим довольно мала, вы можете заставить процессор работать гораздо меньше, запрашивая пошаговую анимацию, например, с помощью шагов (75)

Также было бы неплохо установить небольшие задержки между анимациями, чтобы они не выполнялись одновременно

 body {
  width: 100wh;
  height: 90vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s infinite steps(75);
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
} 
 <html>

<body>
</body>

</html>
Метки: