The DOM style animationFillMode property is used to specify the style of an element when the animation is not playing or when an animation is finished or when there is a delay in animation.
The animationFillMode property can override the default behavior of CSS animations by which CSS animations affect the element when the first keyframe is “played” and then stops affecting it once the last keyframe has completed.
- For returning the animationFillMode property use the following:
- To set the animationFillMode property use below:
object.style.animationFillMode = "none|forwards|backwards|both| initial|inherit";
- none: It will not apply any styles to the target before or after it is executing.
- forwards: It will apply the property values for the time the animation ended.
- backwards: It 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.
- both: It will apply the property values for forwards as well as backwards to the animation.
- initial: It will set the property to its default value.
- inherit: This property is inherited from its parent.
The <div> element get the style values set by the first keyframe before the animation starts during the animation delay period.
Supported Browsers: The browsers supported by animationFillMode property are listed below:
- Google Chrome 43.0
- Firefox 16.0
- Opera 30.0
- HTML | DOM Style top Property
- HTML | DOM Style right Property
- HTML | DOM Style borderImageRepeat Property
- HTML | DOM Style backgroundRepeat Property
- HTML | DOM Style borderLeftWidth Property
- HTML | DOM Style borderTopRightRadius Property
- HTML | DOM Style borderStyle Property
- HTML | DOM Style captionSide Property
- HTML | DOM Style borderBottomRightRadius Property
- HTML | DOM Style animationIterationCount Property
- HTML | DOM Style borderBottomWidth Property
- HTML | DOM Style widows Property
- HTML | DOM Style borderBottomStyle Property
- HTML | DOM Style listStyle Property
- HTML | DOM Style borderTopWidth Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.