Почему css анимация срабатывает, только после ухода мышки с элемента?

Question

[Space Around]

Прописал через transition простенькую анимацию, вот только срабатывает она после ухода мышки с элемента, а должна, по идее, срабатывать и при наведении на элемент.
Пример
Как должно работать: наводишься мышкой и background ПЛАВНО меняет цвет на градиент и текст ПЛАВНО становиться из градиента в белый цвет, когда мышка ушла с элемента, то всё ПЛАВНО возвращается обратно.
Как работает сейчас: наводишься мышкой и background РЕЗКО меняет цвет на градиент и текст РЕЗКО становиться из градиента в белый цвет, когда мышка ушла с элемента, то всё ПЛАВНО возвращается обратно.
P.S.: Знаю, что градиент не поддерживает переходы, НО градиент почему-то обратно возвращается плавно, как так-то?!

Answer 1

[Фин Дел]

https://codepen.io/findelman/pen/RwPEEdv

Comments

[Space Around]

Фин Дел, я нашёл такое же решение, мне только одно не понятно, почему градиент не поддерживает переход?!

[Фин Дел]

Максим Виксна, на самом деле я сам этого не знал ;D, надо у w3c спрашивать почему градиенты до сих пор не поддерживают переходы.

[Rustam Bainazarov]

Максим Виксна, градиенты — это по сути картинки, отрендеренные браузером. Для него это как сделать переход из одной картинки одной в другую — невозможно. Chrome умеет делать fadein-эффект смены background-image, но это совсем не то, что реальный переход.

Возможно, сделают когда-нибудь переходы внутрибраузерные (скорее всего только градиентов с одинаковым количеством стопов), но об этом даже речи пока не ведётся. Так что только либо хаками на CSS, либо с помощью JS-библиотек.