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

Question

[Тирион Ланнистер]

Есть некий блок, у которого есть свойство background: linear-gradient(to top, #bc9155, #d39e54); Как сделать плавный переход на другие цвета, если свойство transition почему-то не работает?

Answer 1

[Сергей Горячев]

Угу, не работает transition с линейным градиентом.
И JS тут совсершенно не при чем %) Делается небольшим костылем на CSS.
Самое простое, использовать блок с абсолютным позиционированием.
https://jsfiddle.net/webirus/0sn1fwet/
Я сделал через псевдоэлемент, так как у меня не заполнен контент.
В случае, если контент есть, просто делайте отдельный див.

Answer 2

[Антон Мудренок]

Да, есть несколько вариантов. Можно делать через opacity, как вам показали выше.
Можно еще сделать контейнер градиента шире, растянуть, обрезать, а потом двигать. Получается более плавный и красивый эффект:
codepen.io/georgehastings/pen/xgwxgo
И еще можно все сделать на canvas сменой кадров.