Почему не срабатывает transition на градиенте?

Question

[ForestEsprit]

Можно ли у градинта плавно менять цвет/прозрачность? Пример ниже. Сейчас получается дёрганно.

#grad1 {
    transition: all .3s;
    height: 200px;
    background: -webkit-radial-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
}
#grad1:hover{
   background: -webkit-radial-gradient(left, rgba(255,255,0,0), rgba(255,0,255,1));
}

<div id="grad1"></div>

Answer 1

[Nikolay Talanov]

Градиент транзишеном менять нельзя. Но можно сделать 2 блока конкретно для бэкграундов (или например через :before/:after) и менять у них прозрачность.

Answer 2

[Ксения Михайлова]

Нет. Градиент - это background-image, а анимация этого свойства не поддерживается. https://bugzilla.mozilla.org/show_bug.cgi?id=546052
Можно сделать через псевдоэлемент с изменением прозрачности.