Анимируем градиенты ещё раз
Предыдущее решение мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и opacity
.
Демо:
Принцип работы:
- Создаем элемент с градиентом.
- Добавляем псевдоэлемент того же размера с градиентом, который должен стать вторым шагом анимации. Задаем ему
opacity: 0
. - По
:hover
родителя или черезanimation
меняемopacity
псевдоэлемента на 1.
Если в элементе есть текст, ему потребуется своя обертка, чтобы поднять его над псевдоэлементами.
Для примера я сделала кнопки:
Конечно, лучше бы градиенты просто анимировались, но отстутствие такой возможности стимулирует поиски новых способов обойти ограничения.
Наверх