CSS3 animation-fill-mode Property
Example
Animate something moving from one place to another and have it stay there:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
Try it yourself »
Definition and Usage
The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).
By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. 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 |
Browser Support
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 | 4.0 -webkit- | 12.0 | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
CSS Syntax
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | Default value. The animation will not apply any styles to the target element before or after it is executing |
| forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
| backwards | The animation 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. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse") |
| both | The animation will follow the rules for both forwards and backwards. That is, it will extend 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 |
Related Pages
CSS3 tutorial: CSS3 Animations
HTML DOM reference: animationFillMode property
