Как анимировать появление градиента при hover?

Question

[Ibishka]

Как анимировать появление градиента при hover?

https://codepen.io/anon/pen/EqNVeE

Думую суть поняли

Answer 1

[Rustam Bainazarov]

Сам по себе градиент не анимируется средствами CSS, потому что это по сути отрендеренная браузером картинка. Его можно заставить делать оное только через JS.

Но можно анимировать отдельный блок с ним (прозрачность, трансформация и т. п.). В данном случае можно повесть на псевдоэлемент спокойно:


В будущем есть планы сделать анимируемые градиенты в браузерах, но спецификации для этого до сих не готовы.

Answer 2

[Дмитрий Дерепко]

https://www.google.com/search?q=css+transition+lin...