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

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
animation-fill-mode43.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.012.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.animationFillMode = "both"

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

ЗначениеОписание
none К элементу не применяются какие-либо стили до (во время задержки) или после воспроизведения анимации. Значение по умолчанию.
forwardsПо окончанию анимации к элементу применяется стиль последнего ключевого кадра. Каким будет этот кадр зависит от сочетания значений свойств animation-directioncss3 и animation-iteration-countcss3:
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-delaycss3. Первый ключевой кадр определяется на основании значения animation-directioncss3:
animation-direction
(значение по умолчанию normal)
Значение первого
ключевого кадра
normal0% или from
alternate0% или from
reverse100% или to
alternate-reverse100% или 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-durationcss3), в которой происходит изменение цвета заднего фона элемента. При этом анимация имеет задержку равную 2 секундам (animation-delaycss3).

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

Пример использования CSS свойства animation-fill-mode.
Пример использования CSS свойства animation-fill-mode.
CSS свойства