CSS3 animation-fill-mode Property
Example
Move an object from one place to another with animation, and leave it there:
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /*Safari and Chrome*/
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that supports the property.
The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
Definition and Usage
The animation-fill-mode property specifies the style to be applied to an element when the animation is not playing (when it has finished, or when it has a delay and has not started playing).
By default, a CSS animation does not affect an element before the first keyframe is played, and stops affecting the element after the last keyframe is completed. The animation-fill-mode property can override this behavior.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | No. SeeAnimatable (animatable)。 |
| version: | CSS3 |
| JavaScript Syntax: | object.style.animationFillMode="forwards" Try it Yourself |
CSS Syntax
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Property value
| Value | Description |
|---|---|
| none | Default value. The animation will not apply any styles to the target element before or after the animation is executing. |
| 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 that start the first iteration of the animation during the period defined by animation-delay. These are the values from the `from` keyframe (when `animation-direction` is "normal" or "alternate") or the values from the `to` keyframe (when `animation-direction` is "reverse" or "alternate-reverse"). |
| both | The animation follows the rules for both forwards and backwards. That is, the animation will extend the animation properties in both directions. |
| initial | Sets this property to its default value. See.initial。 |
| inherit | Inherits this property from the parent element. Seeinherit。 |
Related Articles
CSS3 Tutorial:CSS3 Animations
other extensions