animation-fill-mode

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

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

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется Нет

Синтаксис

animation-fill-mode: none | forwards | backwards | both
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

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

Табл. 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
backwards

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

Табл. 2. Первый ключевой кадр
animation-direction Значение
normal или alternate 0% или from
reverse или alternate-reverse 100% или to
both
К элементу применяются оба правила, как для forwards, так и для backwards.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>animation-fill-mode</title> <style> .wheel { animation: wheel 3s 1s; animation-fill-mode: both; } @keyframes wheel { from { transform: translateX(0) rotate(0);} to { transform: translateX(450px) rotate(2turn); } } </style> </head> <body> <img src="image/wheel.png" alt="" class="wheel"> </body> </html>

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

Объектная модель

Объект.style.animationFillMode

Примечание

  • Chrome до версии 43, Opera до версии 30, Safari до версии 9 и Android до версии 43 поддерживают свойство -webkit-animation-fill-mode.
  • Firefox до версии 16 поддерживает свойство -moz-animation-fill-mode.

Спецификация

Браузеры

10 12 43 30 9 16
43 16 30 9

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Анимация