HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Let the <div> element retain the style values from the last keyframe when the animation ends
The animation-fill-mode
property specifies a style for the element when the animation is not playing (before
it starts, after it ends, or both).
CSS animations do not affect the element before the first keyframe is played
or after the last keyframe is played. The animation-fill-mode
property can override this
behavior.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.animationFillMode="forwards" Try it |
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending 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 |
Let the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period):
div {
animation-fill-mode: backwards;
}
Let the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:
div {
animation-fill-mode: both;
}
CSS tutorial: CSS Animations
HTML DOM reference: animationFillMode property