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

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

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