HTML\CSS → Анимации и keyframes

С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;
  • Аза

    Спс