Способы анимировать градиент на CSS

Приветствую, коллеги! Сегодня простой но эффектный прием на CSS, с рабочим кодом.

 

Введение

Анимировать градиент на CSS пока нельзя, но есть возможность создать иллюзию плавного изменения градиентной заливки с помощью анимации псевдоэлементов.

 

Задача

Написать код анимирующий градиентную заливку элементов с помощью CSS. Исходный код в виде миксинов на препроцессоре SCSS.

Желаемый API SCSS-миксина:

  • цвет(а) заливки
  • тип и время анимации

 

Описание

Возьмем для примера кнопку, потому что этот элемент точно есть в интерфейсе каждого сайта. У кнопки будет градиентная заливка которая будет видна в исходном состоянии (normal), и добавим псевдоэлемент, который будет делать ее вид при наведении (hover).  Анимировать будем различные css-свойства.

Три вида анимации градиента и по два миксина для каждого:

  • Волна  (Wave)
  • Затухание  (Fade)
  • Вспышка 💥 (Flash)

 

Волна Wave

Миксины grad—wave() и grad—wave-long().

Очень простой механизм — полноразмерный псевдоэлемент залит линейным градиентом, и двигается (слайдится) с помощью свойства margin.  Т.о. визуально выглядит как будто идет волна другого цвета.

 

Затухание Fade

Миксины grad—fade() и grad—fade-switch().

Такой же псевдоэлемент исчезает в прозрачное состояние — анимируем его opacity.

 

Вспышка Flash

Миксины grad—flash() и grad—flash-closed().

Псевдоэлемент залит круговым градиентом и при наведении зумится (transform scale). Получается быстровспыхивающее пятно, во втором варианте grad—flash-closed анимация заканчивается начальным цветом.
opacityFlash — непрозрачность цвета вспышки, Number [0-1]
sizeFlash — размер вспышки , Number [0%-100%]

Можете редактировать на codepen

See the Pen
animate css gradient
by Kirill Malahov (@malahov-web)
on CodePen.

 

Применение

Где угодно — кнопки, любые интерактивные элементы, везде где понадобиться какой-нибудь креатив-интерактив.
Можно использовать их как базу для более сложных анимаций.

Материалы:

 

  • Линейный градиент https://developer.mozilla.org/ru/docs/Web/CSS/linear-gradient()
  • Круговой градиент https://developer.mozilla.org/ru/docs/Web/CSS/radial-gradient()