Как сделать анимацию градиентов на background?

Question

[suvo0]

Я так понял анимация градиентов до сих пор не поддерживается?

Что можно придумать в этом простом примере - https://codepen.io/kodej/pen/PjWYpJ

Comments

[Сергей delphinpro]

градиент это свойство background-image, которое относится к discrete animation и, как следствие, не может плавно анимироваться.

[Сергей delphinpro]

Анимацию градиента можно "эмулировать" перемещением градиентного блока

clipping    |----------|
|-----------|          |----------|
| <-> moved | viewport | gradient |
|-----------|          |----------|
            |----------|

[suvo0]

Сергей: я думал градиент - это картинка. Картинку же можно анимировать. Почему градиент нельзя - непонятно.

[Сергей delphinpro]

suvo0: Смену картинки в бэкграунде можно анимировать? Ну-ка просветлите меня. =))

[suvo0]

Сергей: вы сейчас прикалываетесь? https://codepen.io/kodej/pen/vZgNmr

Answer 1

[Stalker_RED]

Да, сами на градиенты свойство transition не действует, но вы можете менять background-position https://jsfiddle.net/cu8bdf3d/
Или можно добавить второй бекграунд в псевдоэлементе и менять его opacity.
https://jsfiddle.net/cu8bdf3d/1/