Style animationFillMode Property
Style ObjectExamples
Change the animationFillMode property of a <div> element:
document.getElementById("myDIV").style.animationFillMode="forwards";
Try it Yourself »
Definition and Usage
The animationFillMode property specifies the style to apply to an element when the animation is not playing (when the animation has finished, or when the animation has a delay and has not started playing).
By default, CSS animations do not affect an element until the first keyframe is played, and stop affecting the element after the last keyframe is completed. The animationFillMode property can override this behavior.
Browser Support
Only Firefox and Opera support the animationFillMode property.
Syntax
Return the animationFillMode property:
object.style.animationFillMode
Set the animationFillMode property:
object.style.animationFillMode="none|forwards|backwards|both|initial|inherit"
Property Values
| Value | Description |
|---|---|
| none | Default value. The animation does not apply any styles to the target element before or after the animation is executed. |
| forwards | After the animation ends (as determined by animation-iteration-count), the animation will apply the property values. |
| backwards | The animation will apply the property values defined in the keyframes of the first iteration of the animation that starts during the animation-delay period. These are the values from the `from` keyframe (when `animationDirection` is `"normal"` or `"alternate"`) or from the `to` keyframe (when `animationDirection` is `"reverse"` or `"alternate-reverse"`). |
| both | The animation follows the rules for both forwards and backwards. That is, the animation extends the animation properties in both directions. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | none |
|---|---|
| Return value: | A string, representing the animation-fill-mode property of an element. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:animation-fill-mode property
Other Extensions