animation-fill-mode

Обновлено: 26.05.2022

animation-fill-mode

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

К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется Нет

Синтаксис

animation-fill-mode: none | forwards | backwards | both

Значения

none К элементу не применяются какие-либо стили.
forwards К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count (табл. 1).

Табл. 1. Последний ключевой кадр

animation-directionanimation-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 или alternate0% или from
reverse или alternate-reverse100% или to
both К элементу применяются оба правила, как для forwards, так и для backwards.

Пример

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

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

Объект.style.animationFillMode

Примечание

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

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

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

Браузеры

animation-fill-mode

Посмотреть совместимость на Can I use?

animation-fill-mode