CSS свойство Animation

Синтаксис

animation: animation-duration || animation-timing-function || 
  animation-delay || animation-iteration-count || animation-direction || 
  animation-fill-mode || animation-play-state || [none | animation-name]

Значения

Любые комбинации значений, разделяемых между собой пробелом, определяющих параметры анимации.

Значение по умолчанию :

animation-name: none
[animation-duration] (#animation-duration): 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

animation-duration

Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет. Можно указать несколько значений, перечисляя их через запятую. Отрицательные значения и значения без указания единиц времени (s или ms) недопустимы и будут игнорироваться.

animation-timing-function

Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Синтаксис

animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | 
     step-start | step-end | steps | cubic-bezier

ease - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
ease-in - Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
ease-out - Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
ease-in-out - Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
linear - Одинаковая скорость от начала и до конца.
step-start - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps - Ступенчатая функция, имеющая заданное число шагов.
Пример для steps:

animation-timing-function: steps(<число>, start | end)

Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.

cubic-bezier - Задаёт функцию движения в виде кривой Безье.

animation-delay

Устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации. Допустимо указывать несколько значений, перечисляя их через запятую.

animation-iteration-count

Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.

Синтаксис

animation-iteration-count: infinite | <число>

Значения

infinite - Анимация повторяется бесконечно.
<число> - Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации.

animation-direction

Устанавливает направление движения анимации.

Синтаксис

animation-direction: normal | alternate | reverse | alternate-reverse

Значения

normal - Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию.
alternate - Анимация идёт с начала до конца, затем плавно возвращается в исходное положение.
reverse - Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию.
alternate-reverse - Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.

animation-fill-mode

Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке.
По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра. К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.

Синтаксис

animation-fill-mode: none | forwards | backwards | both

none - К элементу не применяются какие-либо стили.
forwards - К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count (табл. 1).
backwards - К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction (табл. 2).
both - К элементу применяются оба правила, как для forwards, так и для backwards.

Табл. 1. Последний ключевой кадр

animation-direction	animation-iteration-count	Значение
normal	любое число	100% или to
reverse	любое число	0% или from
alternate	чётное число	0% или from
alternate	нечётное число	100% или to
alternate-reverse	чётное число	100% или to
alternate-reverse	нечётное число	0% или from

Табл. 2. Первый ключевой кадр

animation-direction	Значение
normal или alternate	0% или from
reverse или alternate-reverse	100% или to

animation-play-state

Свойство определяет, проигрывать анимацию или поставить её на паузу. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена.

Синтаксис

animation-play-state: running | paused

Значения

running - Проигрывать анимацию.
paused - Поставить анимацию на паузу.

animation-name

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

Значения

none - Отключает анимацию.
<идентификатор> - Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.

@keyframes

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

Синтаксис

@keyframes <переменная> { [ from | to | <проценты> ] [, from | to | <проценты> ]* }

Значения

<переменная> - Уникальная переменная, которая связывает @keyframes с animation, через это свойство настраивается время анимации и другие её параметры.
from - Первый ключевой кадр, аналогичен 0%.
to - Последний ключевой кадр, аналогичен 100%.
<проценты> - Устанавливает ключевой кадр в процентах от времени всей анимации.