Как анимировать текстовые градиенты и шаблоны в CSS

В этой статье мы покажем, как легко анимировать фоновый градиент с помощью CSS.

В предыдущей статье мы показали, как добавить эффекты градиента и узоры к тексту.

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

Ради этой демонстрации давайте добавим несколько дополнительных цветов к нашему градиентному фону:

h1 {
  background-image: linear-gradient(
    45deg,
    #ffb3ba,
    #c49c6e,
    #bfbf76,
    #77b084,
    #ff7e74,
    #3b82f6,
    #c084fc,
    #db2777
   );
}

Если мы на мгновение отключим background-clip: text и text-color: transparent, то получим лучшее представление о том, как наш градиент заполняет поле содержимого текста.

Теперь давайте пройдемся по шагам анимации нашего фонового градиента.

Шаг 1: Настройка размера фона

Чтобы анимировать наш градиентный фон, нам нужно сделать его больше, чем поле содержимого текста, чтобы мы не могли видеть все сразу. Мы можем сделать это с помощью удобного свойства background-size. (Вы можете прочитать все о размере фона здесь.)

Я собираюсь установить ширину нашего фонового градиента в три раза больше ширины нашего элемента заголовка:

h1 {
  background-size: 300% 100%;
}

Теперь в любой момент времени будет видна только треть градиентного фона, как показано ниже.

Шаг 2: Настройка анимации

Далее мы настроим анимацию, которая будет перемещать фон, чтобы со временем мы могли видеть разные его части.

Мы можем настроить простое правило анимации следующим образом:

h1 {
  animation: gradientAnimation 8s linear infinite;
}

Это позволит перемещать фон вперед-назад каждые 16 секунд.

Далее мы настроим оператор @keyframes:

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

Эта простая @keyframes инструкция будет перемещать наш фон из верхнего левого угла в нижний правый каждые восемь секунд.

На рисунке ниже мы снова отключили background-clip: text и color: transparent, чтобы видеть, что происходит в фоновом режиме.

Как только мы снова включим background-clip: text и color: transparent, мы увидим готовый продукт.

Довольно круто!

Анимация фонового изображения

В нашей статье о добавлении эффектов градиента и узоров к тексту мы также использовали цветочное фоновое изображение.

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

Давайте удалим background-size: contain из исходной демонстрации и вообще не будем устанавливать размер фона. Это оставляет нас с этим:

h1 {
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  background-image: url(floral.jpg);
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
  animation: gradientAnimation 20s linear infinite;
  animation-direction: alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

Результат показан в демо-версии CodePen ниже.

Попробуйте отключить background-clip: text и text-color: transparent на мгновение, если хотите увидеть, что происходит в фоновом режиме.

Наше фоновое изображение по умолчанию повторяется, что выглядит не так уж плохо для данного конкретного изображения. (Просто из интереса попробуйте добавить background-repeat: no-repeat чтобы посмотреть, что получится без повторяющегося фона.) В других ситуациях, когда фоновое изображение не имеет хорошей мозаики, вы можете захотеть предотвратить повторение изображения, а затем использовать background-size, чтобы увеличить изображение, как мы сделали с градиентным фоном выше. Например:

h1 {
  background-repeat: no-repeat;
  background-size: 120%;
}

Вот результат этого в нашей цветочной демонстрации.

Заключение

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

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