Style animationFillMode атрибут

определение и использование

animationFillMode атрибут определяет стиль, который применяется к элементу, когда анимация не играет (в конце анимации или с "задержкой").

по умолчанию, CSS анимация не влияет на элемент, выполняющий анимацию, до того, как начнется первый ключевой кадр, и останавливается влиять на него после завершения последнего ключевого кадра.animationFillMode атрибут может изменить это поведение.

пример

измените атрибут animationFillMode элемента <div>:

document.getElementById("myDIV").style.animationFillMode = "forwards";

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

грамматика

возврат атрибута animationFillMode:

объект.style.animationFillMode

установите атрибут animationFillMode:

объект.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

значение атрибута

значение описание
none по умолчанию. Анимация не применяет ни один стиль к目标是 до или после выполнения.
forwards после завершения анимации (определено animation-iteration-count), анимация будет применять это значение атрибута в конце анимации.
backwards

в течение времени, определенного animation-delay, анимация будет применяться к значениям атрибутов, определенным в ключевых кадрах, которые начнут первое iteration анимации.

эти значения исходят из значений ключевых кадров (когда направление анимации "normal" или "alternate") или до значений ключевых кадров (когда направление анимации "reverse" или "alternate-reverse").
both анимация будет следовать правилам вперед и назад. То есть, она будет расширять атрибут анимации в обоих направлениях.
initial установите этот атрибут в его значение по умолчанию. См. initial.
inherit эта атрибут inherits его значение от родительского элемента. См. inherit.

технические детали

по умолчанию: none
возвратное значение: строка, представляющая элемент Атрибут animation-fill-mode стиля.
версия CSS: CSS3

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

animationFillMode является функцией CSS3 (1999).

Все браузеры полностью поддерживают его:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
поддержка поддержка поддержка поддержка поддержка 11

связанные страницы

CSS справочник:Атрибут animation-fill-mode стиля