свойство animation-fill-modeCSS3-генератор ☛

Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство 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>
 <head>
  <meta charset="utf-8">
  <title>animation-fill-mode</title>
  <style>
   .wheel {				
    animation: wheel 3s 1s;	
    animation-fill-mode: both;
    -webkit-animation: wheel 3s 1s;	
    -webkit-animation-fill-mode: both;	
   }
   @keyframes wheel {
    from { transform: translateX(0) rotate(0);}				
    to { transform: translateX(450px) rotate(2turn); }
   }
   @-webkit-keyframes wheel {
    from { transform: translateX(0) rotate(0);}				
    to { transform: translateX(450px) rotate(2turn); }
   }		
  </style>
 </head>
 <body>
   /<img src="images/wheel.png" alt="" class="wheel">
 </body>
</html>

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

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

Объект.style.animationFillMode

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-fill-mode.

Opera до версии 12.10 поддерживает свойство -o-animation-fill-mode.

Firefox до версии 16 поддерживает свойство -moz-animation-fill-mode.

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera		Safari	Firefox
10	3	12	12.10	4	5	16

Android	Firefox Mobile		Opera Mobile		Safari Mobile
2	5	16	12	12.10	4

✖

Браузеры

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

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

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

Анимация

См. также