Почему не работает плавная css анимация с градиентом?

Question

[del993788]

Здравствуйте. Вот две кнопки: https://jsfiddle.net/053varho/ . Наводите на первую: текст и фон меняются плавно, наводите на вторую: фон меняется резко, текст плавно. Почему и как исправить? Хочу чтобы градиентный фон заполнялся плавно.

Answer 1

[trushka]

вот ещё вариант с помощью увеличения background-size и изменения background-position при ховере
https://jsfiddle.net/053varho/1/

Comments

[del993788]

о, круто! Спасибо!

Answer 2

[Nikolay Talanov]

Ну потому что css транзишены не работают с градиентами. Самый простой трюк - создаете псевдоэлемент :before/:after с фоном и его показываете через изменение opacity от 0 до 1 (таким же способом например "анимируют" переход от одного градиента к другому).

Answer 3

[Александр Белькевич]

Попробуйте по другому. У кнопки задайте after. С height 0. При наведении height увеличивайте до высоты кнопки

Что-то подобное

В примере 2 варианта: с плавным появлением с помощью opacity и появление снизу вверх

Answer 4

[Егор Живагин]

Если к примеру предыдущего оратора допишите ease-in-out в transition, то полностью получите нужное вам решение (вариант с opacity)