Анимируем градиенты ещё раз

Предыдущее решение мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и opacity.

Демо:

Принцип работы:

  1. Создаем элемент с градиентом.
  2. Добавляем псевдоэлемент того же размера с градиентом, который должен стать вторым шагом анимации. Задаем ему opacity: 0.
  3. По :hover родителя или через animation меняем opacity псевдоэлемента на 1.

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

Для примера я сделала кнопки:

Конечно, лучше бы градиенты просто анимировались, но отстутствие такой возможности стимулирует поиски новых способов обойти ограничения.

Background-blend-modeSVG-прелоадеры
Наверх