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

Сегодня мы рассмотрим все, что вам нужно знать, чтобы приступить к созданию собственных CSS-анимаций. Первое, что вам нужно знать, это правило @keyframes…

Правило @keyframes

Правило @keyframes в CSS используется для определения анимации, применяемой к элементу. Он используется для указания стилей для различных точек в последовательности анимации, также называемых ключевыми кадрами.

Основной синтаксис правила @keyframesrule следующий:

@keyframes animation-name {
  keyframe-selector {
    property: value;
  }
}

Имя анимации — это имя, которое вы назначаете анимации, чтобы ее можно было применить к элементу с помощью свойства animation-name. Селектор ключевого кадра — это процентное значение или значение «от» или «до», которое представляет точку в последовательности анимации, к которой будут применяться стили.

имя-анимации

Чтобы применить анимацию, определенную в правиле @keyframes, вы можете добавить свойство animation-name к элементу. Например, если у нас определены следующие ключевые кадры:

@keyframes color-change {
  from {
    color: red;
  }
  to {
    color: blue;
  }
}

Мы можем применить эту анимацию к элементу со свойством animation-name, просто выполнив следующие действия:

p {
  animation-name: color-change;
}

продолжительность анимации

Но есть загвоздка! Продолжительность любой данной анимации по умолчанию составляет 0 секунд. Таким образом, если вы не укажете свойство animation-duration рядом с animation-name, вы не сможете увидеть анимацию. Итак, если мы обновим наш предыдущий пример, чтобы он выглядел так:

p {
  animation-name: color-change;
  animation-duration: 2s;
}

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

количество итераций анимации

По умолчанию анимация будет запущена один раз, а затем стили элемента вернутся к тем стилям, которые были у него до начала анимации. Свойство animation-iteration-count позволяет указать, сколько раз должна запускаться анимация. Вы можете использовать число или ключевое слово infinite, чтобы анимация выполнялась непрерывно.

p {
  animation-name: color-change;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

анимация-направление

В предыдущем примере наши абзацы изменятся с красного на синий в течение 2 секунд. Затем он вернется к красному цвету и будет повторять анимацию бесконечно. Но что, если мы хотим, чтобы анимация переходила от красного к синему, а затем в обратном порядке, чтобы переход от синего к красному был красивым? Здесь в игру вступает свойство animation-direction. Мы можем указать 4 разных значения для свойства animation-duration:

  • normal: запуск от первого ключевого кадра (0%) до последнего (100%)
  • reverse: переход от последнего ключевого кадра (100%) к первому (0%)
  • alternate: по очереди запускайте анимацию один раз вперед, затем один раз назад и т. д.
  • alternate-reverse: по очереди запускайте анимацию один раз назад, затем один раз вперед и т. д.
p {
  animation-name: color-change;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

функция синхронизации анимации

Свойство CSS animation-timing-function используется для установки функции синхронизации анимации. Функция синхронизации управляет скоростью, с которой анимация проходит через ключевые кадры. Его можно использовать для создания плавного или постепенного перехода между ключевыми кадрами или для создания более резкого или резкого перехода.

Есть несколько предопределенных функций синхронизации, которые можно использовать со свойством animation-timing-function:

  • ease: начинается медленно, ускоряется, а затем снова замедляется (значение по умолчанию)
  • linear: движется с постоянной скоростью
  • ease-in: начинается медленно и ускоряется
  • ease-out: начинается быстро и замедляется
  • ease-in-out: начинается медленно, ускоряется, затем снова замедляется

Кроме того, вы также можете создать свою собственную временную функцию кубического Безье, используя функцию cubic-bezier(x1, y1, x2, y2), где x1, y1, x2, y2 — это координаты двух контрольных точек кривой кубического Безье.

анимация-заливка-режим

CSS-свойство animation-fill-mode используется для указания стиля элемента до и после анимации. Его можно использовать для управления окончательным состоянием элемента после завершения анимации.

Есть несколько предопределенных значений, которые можно использовать со свойством animation-fill-mode:

  • none: (значение по умолчанию) анимация не влияет на элемент до или после анимации
  • forwards: элемент сохраняет значения стиля, установленные последним ключевым кадром анимации после завершения анимации.
  • backwards: для элемента устанавливаются значения стиля первого ключевого кадра анимации до начала анимации.
  • both: для элемента устанавливаются значения стиля первого ключевого кадра анимации до начала анимации и сохраняются значения стиля, установленные последним ключевым кадром анимации после завершения анимации.

анимация-задержка

Последнее свойство CSS, связанное с анимацией, — animation-delay. Это свойство используется для указания количества времени, которое должно пройти до начала анимации. Его можно использовать для создания задержки между временем загрузки элемента и временем начала анимации.

Хорошо! Это основы анимации CSS. Теперь давайте немного попрактикуемся, шаг за шагом создав крутую анимацию.

Вот анимация, которую мы создадим:

Начнем с настройки HTML:

<div class='box' />

Теперь давайте добавим коробке несколько первоначальных стилей.

.box {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
}

Затем мы можем определить ключевые кадры для нашей анимации.

@keyframes move-and-color {
  0% {
    transform: translateX(-150) rotate(0deg) scale(1);
    background-color: #4caf50;
  }
  25% {
    transform: translateX(0px) rotate(180deg) scale(1.5);
    background-color: #8bc34a;
  }
  50% {
    transform: translateX(150px) rotate(360deg) scale(1);
    background-color: #cddc39;
  }
  75% {
    transform: translateX(0px) rotate(180deg) scale(1.5);
    background-color: #8bc34a;
  }
  100% {
    transform: translateX(-150px) rotate(0deg) scale(1);
    background-color: #4caf50;
  }
}

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

Теперь давайте применим анимацию к боксу.

.box {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
  animation: move-and-color;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

И вуаля! Коробка теперь анимируется! Мы настроили его на 3 секунды, чтобы пройти один круг через ключевые кадры и продолжать бесконечно.

Если вы хотите увидеть мой рабочий пример, не стесняйтесь проверить мой codepen.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.