Как сделать анимацию фонового градиента, которая не грузит CPU?

Question

[Stepan S.]

Пример, который грузит CPU и не работает в Firefox

UPD Свойство steps предложенное AngReload снизило нагрузку, но уменьшило плавность. + Обнаружился баг в Firefox (на SVG градиенты двигаются неправильно, тк он сдвигает path влево на 100% от 125% заданных в свойстве width).

UPD2 Приглашаю эксперта Евгений Петров

Comments

[Максим Тимофеев]

Любой код грузит цпу. Анимация особенно.

Answer 1

[AngReload]

Используйте animation-timing-function: steps вместо linear, ведь анимация очень плавная, можно и уменьшить частоту кадров.

$animation-steps: 100;
codepen.io/anon/pen/BKoqpm?editors=1100

Comments

[Stepan S.]

А скайп или телеграм есть у вас? (мой stepa_mi и tg — miloslovesky)

Answer 2

[Александр Таратин]

Webgl
Нагрузка будет нулевая, если через шейдер сделаете.

Comments

[Stepan S.]

Написал в скайп