Как сгладить CSS градиентный переход? - PullRequest
Новая
       30

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

1 голос
/ 19 апреля 2019

Я создаю интерактивный сенсорный дисплей с помощью программы 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>

Ответы [ 2 ]

2 голосов
/ 19 апреля 2019

Анимация 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>
0 голосов
/ 19 апреля 2019

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

Поскольку разница между фреймом и следующим довольно мала, вы можете заставить процессор работать гораздо меньше, запрашивая пошаговую анимацию, например, с помощью steps (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>
...