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

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

Демо:

See the Pen Animated gradient with pseudo elements by yoksel (@yoksel) on CodePen.

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

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

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

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

See the Pen Blurry buttons with softly animated gradients by yoksel (@yoksel) on CodePen.

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

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus