СSS-анимация состоит из двух частей: набора ключевых кадровkeyframes
и параметров самой анимации. Анимация описывает, как будет меняться стиль блока от начальной до конечной точки.
Пример описания и применения анимации:
/* раскадровка */
@keyframes my_animation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.btn {
animation-name: my_animation;
animation-duration: 1s;
}
В данном примере мы назначили анимацию my_animationэлементам с классом .btn. В результате работы анимации элемент плавно прокрутится по своей оси за 1 секунду. Одному элементу могут быть одновременно назначены несколько анимаций.
@keyframes
задает название анимации, а также описывает ключевые кадры — начальный и конечный, которые задаются с помощью зарезервированных слов from
и to
или значений 0%
и100%
. Если не задан начальный ключевой кадр, то анимация будет проигрываться из исходного стилевого состояния элемента к ближайшему шагу из перечисленных в keyframes и далее. Если не задан конечный кадр, то после достижения последнего шага, анимация проиграется в обратном направлении до достижения изначального состояния элемента.
Пример использования анимации на CSS:
@keyframes color_animation {
from { color: red; }
33%, 66% { color: green; }
to { color: blue; }
}
@keyframes scale_animation {
50% { transform: scale(2); }
}
/* Множественная анимация */
.btn {
animation-name: color_animation, scale_animation;
animation-duration: 5s, 10s;
animation-iteration-count: infinite;
animation-direction: normal, reverse;
animation-delay: 0.9s, 200ms;
animation-fill-mode: forwards, ;
}
Свойство animation-name
указывает название анимации.
Свойство animation-duration
указывает длительностьанимации, задается в секундах s
или миллисекундах ms
.
Свойство animation-delay
указывает задержку начала анимации, задается в секундах s
или миллисекундах ms
.
Свойство animation-iteration-count
определять сколько раз будет повторяться анимация. Значение 0
означает, что анимация не будет выполнена, в остальных случаях она повторится указанное число раз. Значение infinite
означает, что анимация будет выполняться бесконечно.
Свойство animation-direction
указывает направление анимации. Значения:
normal
— прямое направление воспроизведения (по умолчанию);
reverse
— проигрывание начинается с конца и идет к началу (обраное);
alternate
— нечетные проигрывания будут выполняться в прямом направлении, а четные — в обратном (на основе значения animation-iteration-count);
alternate-reverse
— нечетные проигрывания наоборот будут выполняться в обратном направлении, а четные — в прямом.
Свойство animation-fill-mode
определяет, сохранит ли свое состояние объект, когда анимация уже закончилась. Значения:
forwards
— элемент сохранит свое состояние после завершения анимации;
backwards
— элемент примет начальное состояние до начала анимации;
both
— до начала анимации элемент примет состояние первого ключевого кадра, а после завершения — конечное состояние.
Свойство animation-play-state
позволяет остановить или продолжить анимацию (возобновить с места остановки). Значения:
running
— начинает или возобновляет анимацию (по умолчанию);
paused
— приостанавливает анимацию.
Свойство animation-timing-function
определяет, как будет происходить анимация: с какой скоростью и ускорением (динамикой или “формулой”). Значения:
ease
— плавная анимация, начинается медленно затем ускоряется и к концу движения опять замедляется (по умолчанию);
linear
— равномерная анимация, без ускорений и замедлений;
ease-in
— анимация медленно начинается, а к концу ускоряется;
ease-out
— анимация начинается быстро, а к концу замедляется;
ease-in-out
— анимация начинается и заканчивается медленно, но происходит это интенсивнее (похоже на ease).
Задавать свои функции (формы) анимации можно с помощью функции cubic-bezier
(кубических кривых Безье). А также с помощью steps
— «ступенек», по которым будет идти переход. steps принимает в аргументах число_шагов и направление. При заданном направлеии start — первый шаг выполняется одновременно с началом анимации, а в случае c end — последний шаг будет выполнен вместе с завершением анимации.
animation-timing-function: linear;
animation-timing-function: cubic-bezier(0.42, 0, 1, 1); // аналог ease
animation-timing-function: steps(5, start);
Краткая запись свойства animation имеет синтаксис:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
. Пример:
animation: my_animation 5s ease 200ms infinite alternate forwards running;