Свойство анимации стиля FillMode
Пример
Изменение свойства animationFillMode элемента <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Определение и использование
Свойство animationFillMode указывает, какие стили будут применяться к элементу, когда анимация не воспроизводится (когда она завершена или имеет «задержку»).
По умолчанию анимация CSS не будет влиять на анимируемый элемент до тех пор, пока не будет «воспроизведен» первый ключевой кадр, а затем перестанет влиять на него после завершения последнего ключевого кадра. Свойство animationFillMode может переопределить это поведение.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует Moz, указывают на первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Синтаксис
Верните свойство animationFillMode:
object.style.animationFillMode
Установите свойство animationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Значения свойств
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Технические детали
Значение по умолчанию: | никто |
---|---|
Возвращаемое значение: | Строка, представляющая свойство animation-fill-mode элемента. |
CSS-версия | CSS3 |
Связанные страницы
Справочник по CSS: свойство animation-fill-mode