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

Значение по умолчанию:	none
Inherited:	no
Animatable:	no.
Version:	CSS3
Синтаксис JavaScript:	object.style.animationFillMode="forwards"

Поддержка браузера

Свойство:	animation-fill-mode
Chrome	43.0/4.0 -webkit-
Explorer/Edge	10.0
Firefox	16.0/5.0 -moz-
Safari	4.0 -webkit-
Opera	15.0 -webkit-/12.1 12.0 -o-

Синтаксис CSS

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

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

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