CSS свойство animation-fill-mode

Определение и применение

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

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации - animation css3 , чтобы установить все свойства анимации в одном объявлении.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
animation-fill-mode	43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.animationFillMode = "both"

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

Значение

Описание

none

К элементу не применяются какие-либо стили до (во время задержки) или после воспроизведения анимации. Значение по умолчанию.

forwards

По окончанию анимации к элементу применяется стиль последнего ключевого кадра. Каким будет этот кадр зависит от сочетания значений свойств animation-direction css3

и animation-iteration-count css3

animation-direction (значение по умолчанию normal)	animation-iteration-count (значение по умолчанию 1)	Значение последнего ключевого кадра
normal	четное или нечетное число	100% или to
reverse	четное или нечетное число	0% или from
alternate	четное число	0% или from
alternate	нечетное число	100% или to
alternate-reverse	четное число	100% или to
alternate-reverse	нечетное число	0% или from

backwards

К элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода заданного свойством animation-delay css3

. Первый ключевой кадр определяется на основании значения animation-direction css3

animation-direction (значение по умолчанию normal)	Значение первого ключевого кадра
normal	0% или from
alternate	0% или from
reverse	100% или to
alternate-reverse	100% или to

both

К элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена - во время задержки).

initial

Устанавливает свойство в значение по умолчанию.

inherit

Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Использование свойства animation-fill-mode</title>
<style>
div {
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
color: white; /* цвет шрифта */
background: green; /* цвет заднего фона */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
position: relative; /* элемент с относительным позиционированием  */
animation-name: iliketomoveit; /* имя анимации */
animation-duration: 5s; /* продолжительность анимации */
animation-animation-delay: 2s; /* анимация воспроизводится c задержкой 2 секунды  */
}
.test {
animation-fill-mode: none; /* не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации */
}
.test2 {
animation-fill-mode: forwards; /* по окончанию анимации  применяется стиль последнего ключевого кадра (красный фон) */
}
.test3 {
animation-fill-mode: backwards; /*  применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. */
}
.test4 {
animation-fill-mode: both; /*  применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена - во время задержки). */
}
@keyframes iliketomoveit {
	0%   {background: yellow;} /* задаем цвет заднего фона при начале анимации */
	100% {background: red;} /* задаем цвет заднего фона по завершению анимации */
} 
</style>
</head>
	<body>
		<div class = "test">none</div>
		<div class = "test2">forwards</div>
		<div class = "test3">backwards</div>
		<div class = "test4">both</div>
	</body>
</html>

В этом примере мы создали анимацию продолжительностью 5 секунд (animation-duration css3 ), в которой происходит изменение цвета заднего фона элемента. При этом анимация имеет задержку равную 2 секундам (animation-delay css3 ).

С использованием селектора класса и свойства animation-fill-mode css3 мы указали различные значения, которые определяют стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку):

Первый элемент - к элементу не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации. Это значение по умолчанию.
Второй элемент - по окончанию анимации к элементу применяется стиль последнего ключевого кадра (красный фон).
Третий элемент - к элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр).
Четвертый элемент - к элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена - во время задержки). Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр), а по окончанию получит красный фон

CSS свойства