CSS3 animation-fill-mode Property
Example
Move an object animatically from one place to another and leave it there:
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Safari and Chrome */
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 <br>5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- <br>12.1 <br>12.0 -o- |
Definition and Usage
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).
By default, CSS animations do not affect the element until the first keyframe is played and stop affecting it after the last keyframe is completed. The animation-fill-mode property can override this behavior.
| Default value: | none |
|---|---|
| Inherited: | no |
| --- | --- |
| Animatable: | no. See animatable |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.animationFillMode="forwards" Try it |
| --- | --- |
CSS Syntax
Property Values
| Value | Description |
|---|---|
| none | Default value. The animation will not apply any styles to the element before or after it is executing. |
| forwards | The element will retain the style values that are set by the last keyframe (determined by animation-iteration-count). |
| backwards | The animation will apply the values defined in the keyframe that will start the first iteration during the period defined by animation-delay. These are the values from the from keyframe (when animation-direction is "normal" or "alternate") or the to keyframe (when animation-direction is "reverse" or "alternate-reverse"). |
| both | The animation will follow the rules for both forwards and backwards, thus extending 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 |
Related Articles
CSS3 Tutorial: CSS3 Animations