Анимация CSS-градиентов

Спецификация CSS3 Transitions содержит список свойств, которые можно анимировать. Этот список охватывает анимируемые свойства для анимации переходов (transitions) и анимации по ключевым кадрам (keyframe animations).

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

Фоновые градиенты учитывают некоторые свойства фона элемента, которые можно анимировать. Например, такие свойства, как background-size и background-position.

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

В коде нет ничего сложного и я не первый, кто демонстрирует подобную технику, но вот код, чтобы мы могли разобраться, как это работает:

See the Pen CSS Gradients Animation by Vadim (@sanks-the-sans) on CodePen.