Анимация градиента

Анимация с помощью background-position

Сначала рассмотрим распространенные, базовые варианты. Если вам сразу хочется перейти к новинкам, то прыгайте сюда анимация градиента с помощью @property.

Итак, возьмем любой блок:

<div class="gradient-box"></div>

Зададим ему первоначальную заливку градиентом. Но так, чтобы размер фона был в два раза больше самого блока, поставим 200% в background-size. Начальная позиция фона 0 0

background: linear-gradient(to right, #ff0000, #ffff00) no-repeat 0 0 / 200% 100%;

При наведении будем смещать позицию фона в положение 100% 100%

.gradient-box&:hover {
  background-position: 100% 100%;
}

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

И вот, что получилось в итоге:

.gradient-box {
  width: 200px;
  height: 100px;
  background: linear-gradient(to right, #ff0000, #ffff00) no-repeat 0 0 / 200% 100%;
  transition: 2s background-position linear;

  &:hover {
    background-position: 100% 100%;
  }
}

Анимация с помощью background-size

Другой простой способ — анимация размера градиента. Используя свойство background-size, можно изменять размер градиента, создавая эффект "растяжения" или "сжатия".

Для разнообразия покажу вариант с @keyframes

@keyframes gradient-size-animation {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 200% 200%;
  }
  100% {
    background-size: 100% 100%;
  }
}

В этом коде градиент увеличивается в 2 раза в середине анимации, а затем возвращается к исходному размеру.

Анимация с помощью псевдоэлемента

Не буду подробно останавливаться на этом варианте. Его суть в том, что из-за границы элемента плавно выезжает псевдоэлемент. Либо меняется его прозрачность и он плавно проступает над основным фоном. Можно делать интересные эффекты используя два псевдоэлемента и их наложение и относительное движение.

Анимация градиента с помощью @property

CSS правило @property позволяет разработчикам объявлять кастомные свойства (custom properties, переменные CSS) с типами, значениями по умолчанию и наследованием. В результате мы можем передать браузеру информацию, необходимую для анимации этих свойств.

Подробнее о @property можно почитать тут https://css-tricks.com/property/ или https://css-tricks.com/exploring-property-and-its-animating-powers. С июля 2024 года эта функция работает на последних устройствах и версиях браузеров, но не забывайте проверять поддержку на caniuse.

Создадим блок с фоновым градиентом, но один из цветов укажем не напрямую, а через кастомное свойство. При наведении будем менять этот цвет, но снова не сам, а отвечающее за него var(--gradient-start)

.gradient-box {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;

  &:hover {
    --gradient-start: red;
  }
}

Верхний, белый, цвет поменяется на красный. Это уже успех, но никакой плавности пока не будет, даже несмотря на то, что в коде уже есть transition: --gradient-start 1s;

Чтобы эта плавность появилась, нам понадобится @property. Добавим вот такой код:

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

Этим мы объяснили браузеру, что наше новое кастомное свойство --gradient-start ему нужно обрабатывать как цвет(MDN property syntax). А цвета можно анимировать.

See the pen (@Websitio) on CodePen.

Текст градиентом и его анимация

В более ранних статьях мы рассматривали как сделать градиентную заливку для текста на CSS. А теперь сделаем для него плавные переходы при наведении.

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

See the pen (@Websitio) on CodePen.

Использование @property для анимации градиентов — это новый удивительный инструмент, который позволяет создавать более сложные и привлекательные визуальные эффекты.