@del993788

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

Здравствуйте. Вот две кнопки: https://jsfiddle.net/053varho/ . Наводите на первую: текст и фон меняются плавно, наводите на вторую: фон меняется резко, текст плавно. Почему и как исправить? Хочу чтобы градиентный фон заполнялся плавно.
  • Вопрос задан
  • 2940 просмотров
Решения вопроса 1
trushka
@trushka
вот ещё вариант с помощью увеличения background-size и изменения background-position при ховере
https://jsfiddle.net/053varho/1/
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Ну потому что css транзишены не работают с градиентами. Самый простой трюк - создаете псевдоэлемент :before/:after с фоном и его показываете через изменение opacity от 0 до 1 (таким же способом например "анимируют" переход от одного градиента к другому).
Ответ написан
Комментировать
AlexBelkevich
@AlexBelkevich
Нет нерешаемых задач. Есть деревянные клиенты
Попробуйте по другому. У кнопки задайте after. С height 0. При наведении height увеличивайте до высоты кнопки

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

В примере 2 варианта: с плавным появлением с помощью opacity и появление снизу вверх
Ответ написан
Комментировать
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Если к примеру предыдущего оратора допишите ease-in-out в transition, то полностью получите нужное вам решение (вариант с opacity)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы