Как сделать плавный переход линейного градиента в js?
Угу, не работает transition с линейным градиентом.
И JS тут совсершенно не при чем %) Делается небольшим костылем на CSS.
Самое простое, использовать блок с абсолютным позиционированием.
https://jsfiddle.net/webirus/0sn1fwet/
Я сделал через псевдоэлемент, так как у меня не заполнен контент.
В случае, если контент есть, просто делайте отдельный див.
Да, есть несколько вариантов. Можно делать через opacity, как вам показали выше.
Можно еще сделать контейнер градиента шире, растянуть, обрезать, а потом двигать. Получается более плавный и красивый эффект:
codepen.io/georgehastings/pen/xgwxgo
И еще можно все сделать на canvas сменой кадров.