animation-fill-mode

Пример

Пусть элемент <div> сохранит значения стиля из последнего ключевого кадра, когда анимация закончится:

div {
animation-fill-mode: forwards;
}

Определение animation-fill-mode

CSS свойство animation-fill-mode определяет стиль для элемента, когда анимация не воспроизводится (до ее начала, после ее окончания или и то, и другое).

CSS Анимация не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. CSS свойство animation-fill-mode может переопределять это поведение.

Значение по умолчанию:	none
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.animationFillMode="forwards" Попробуй

Поддержка animation-fill-mode

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Цифры, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Свойство
animation-fill-mode	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.1 12.0 -o-

Синтаксис animation-fill-mode

Значения свойств

Значение	Описание
none	Значение по умолчанию. Анимация не будет применять никаких стилей к элементу до или после его выполнения
forwards	Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от направления анимации и количества итераций анимации).
backwards	Элемент получит значения стиля, заданные первым ключевым кадром (зависит от направления анимации), и сохранит их в течение периода задержки анимации
both	Анимация будет следовать правилам как для прямого, так и для обратного хода, расширяя свойства анимации в обоих направлениях
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры animation-fill-mode

Пример

Пусть элемент <div> получит значения стиля, заданные первым ключевым кадром перед началом анимации (в течение периода задержки анимации):

div {
animation-fill-mode: backwards;
}

Попробуйте сами »

Пример

Пусть элемент <div> получает значения стиля, заданные первым ключевым кадром перед началом анимации, и сохраняет значения стиля из последнего ключевого кадра, когда анимация заканчивается:

div {
animation-fill-mode: both;
}

Попробуйте сами »