Style animationFillMode attribute

definition and usage

animationFillMode The property specifies the style applied to the element when the animation is not playing (at the end of the animation, or with a "delay").

By default, CSS animations do not affect the animated element before playing the first keyframe, and then stop affecting it after the last keyframe is completed.animationFillMode The property can override this behavior.

example

Change the animationFillMode property of the <div> element:

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

try it yourself

syntax

Return the animationFillMode property:

object.style.animationFillMode

Set the animationFillMode property:

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

property value

value description
none default value. The animation will not apply any style to the target before or after execution.
forwards After the animation ends (determined by animation-iteration-count), the animation will apply this property value at the end of the animation.
backwards

Within the time period defined by animation-delay, the animation will apply the property values defined in the keyframe that starts the first iteration of the animation.

These are the values from the keyframes (when the animation direction is "normal" or "alternate") or to the keyframes (when the animation direction is "reverse" or "alternate-reverse").
both The animation follows the forward and backward rules. That is, it will expand the animation properties in both directions.
initial Set this property to its default value. See initial.
inherit This property inherits from its parent element. See inherit.

technical details

default value: none
return value: a string that represents the element's animation-fill-mode egenskab.
CSS version: CSS3

browser support

animationFillMode is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
supports supports supports supports supports 11

related pages

CSS reference manual:animation-fill-mode egenskab