Style animationFillMode Property

Definition and Usage

animationFillMode This property specifies the styles that will be 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 Properties 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 styles 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 will start 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 will follow the forward and backward rules. That is, it will expand the animation properties in both directions.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: none
Return Value: A string that represents the element's animation-fill-mode Property.
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
Supported Supported Supported Supported Supported 11

Related Pages

CSS Reference Manual:animation-fill-mode Property