Анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
Чтобы использовать анимацию в проекте, нужно сделать две вещи:
- Создать анимацию.
- Связать её с анимируемым элементом и указать нужные свойства.
Анимация — это набор ключевых кадров, или кейфреймов, хранящихся в CSS:
@keyframes test-animation {
0% {
width: 50px;
}
100% {
width: 150px;
}
}
Давайте разберём, что здесь происходит. Ключевое слово @keyframes
обозначает саму анимацию. Затем идёт имя анимации, в нашем случае — test-animation
. В фигурных скобках содержится список кейфреймов. Мы используем начальный кадр 0%
и конечный 100%
(их также можно записать как from
и to
).
Взгляните на код ниже. Анимацию можно задать и так:
@keyframes test-animation {
from {
width: 50px;
}
30% {
width: 99px;
}
60.8% {
width: 120px;
}
to {
width: 150px;
}
}
Учтите, что, если начальный или конечный кадры не указаны, браузер определит их автоматически так, будто к ним не была применена анимация.
В данном примере, как и в дальнейших, для наглядности добавлены несколько строк JavaScript-кода, которые подключают/отключают класс с анимацией к элементу. Просто нажмите на него, чтобы воспроизвести анимацию:
See the Pen Simple animation by Dash Bouquet (@dashbouquetdevelopment) on CodePen.
Подключить анимацию к элементу можно так:
element {
animation-name: current-anim-name;
animation-duration: 2s;
}
Свойство animation-name
задаёт имя для анимации @keyframes
. Правило animation-duration
задаёт длительность анимации в секундах (3s
, 65s
, .4s
) или миллисекундах (300ms
, 1000ms
).
Вы можете группировать кейфреймы:
@keyframes animation-name {
0%, 35% {
width: 100px;
}
100% {
width: 200px;
}
}
К одному элементу можно применить несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:
element {
animation-name: animation-1, animation-2;
animation-duration: 2s, 4s;
}
Задержка анимации
Свойство `animation-delay` задаёт задержку перед воспроизведением анимации в секундах или миллисекундах:
element {
animation-name: animation-1;
animation-duration: 2s;
animation-delay: 5s; // перед запуском анимации пройдёт 5 секунд
}
Повторное воспроизведение анимации
При помощи свойства `animation-iteration-count` можно указать число повторов анимации: 0, 1, 2, 3, … — или `infinite` для зацикливания:
element {
animation-name: animation-1;
animation-duration: 2s;
animation-delay: 5s;
animation-iteration-count: 3; // анимация воспроизведётся 3 раза
}
Состояние элемента до и после анимации
Свойство `animation-fill-mode` указывает, в каком состоянии элемент будет находиться до начала анимации и после её завершения:
- `animation-fill-mode: forwards;` — после завершения анимации элемент будет находиться в состоянии последнего кейфрейма;
- `animation-fill-mode: backwards;` — после завершения анимации элемент будет находиться в состоянии первого кейфрейма;
- `animation-fill-mode: both;` — перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения — в состоянии последнего.
В примере ниже к трём элементами применяется одна и та же анимация, различается лишь значение `animation-fill-mode`:
See the Pen BEFORE and AFTER animation by Dash Bouquet (@dashbouquetdevelopment) on CodePen.
Запуск и остановка анимации
За это отвечает свойство `animation-play-state`, которое может принимать два значения: `running` или `paused`. Тут всё просто 🙂
Направление анимации
Используя свойство `animation-direction`, мы можем управлять направлением воспроизведения анимации. Вот возможные значения:
- `animation-direction: normal;` — анимация воспроизводится в прямом порядке, как обычно;
- `animation-direction: reverse;` — анимация воспроизводится в обратном порядке, от `to` к`from`;
- `animation-direction: alternate;` — чётные повторы анимации воспроизводятся в обратном порядке, нечётные — в прямом;
- `animation-direction: alternate-reverse;` — нечётные повторы анимации воспроизводятся в обратном порядке, чётные — в прямом.
See the Pen Direction of animation by Dash Bouquet (@dashbouquetdevelopment) on CodePen.
Функция плавности вывода анимируемых кадров
Свойство `animation-timing-function` позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Стоит учесть, что по умолчанию анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас существуют следующие предопределённые значения: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end.`
Однако вы можете создавать такие функции самостоятельно. Значение `animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);` принимает на вход 4 аргумента и строит кривую распределения процесса анимации. Попрактиковаться в создании этих функций можно cubic-bezier.com и matthewlein.com.
И, наконец, анимацию можно разбить на набор дискретных значений при помощи функции `steps (amount of steps, direction)`, которая принимает на вход количество шагов и направление (`start` или `end`). В следующем примере анимация состоит из 7 шагов, последний из которых произойдёт прямо перед завершением анимации:
element {
animation-name: animation-1;
animation-duration: 2s;
animation-delay: 5s;
animation-iteration-count: 3;
animation-timing-function: steps(7, end);
}
See the Pen Direction of animation within time by Dash Bouquet (@dashbouquetdevelopment) on CodePen.
Совместимость с браузерами
CSS-анимация хорошо поддерживается браузерами. С актуальной информацией можно ознакомиться, взглянув на эту таблицу:
Материалы для дальнейшего изучения
- animate.css — самая популярная библиотека для работы с анимациями;
- effeckt.css — ещё одна известная библиотека;
- интерактивная шпаргалка;
- подробнейшая документация от Mozilla;
- bounce.js — библиотека для создания классных эффектов.
Также в изучении анимации вам поможет этот англоязычный курс:
Вот и всё! Возможно, какие-то моменты мы не разобрали, но при помощи материалов, указанных выше, вы сможете сделать это самостоятельно. Успехов в дальнейшем изучении веб-разработки!
Адаптированный перевод статьи «CSS3 Animation Step by Step»