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). This "Understanding animation-fill-mode" article was a big help. 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. The syntax and values for this property are as follows:
animation-fill-mode: value;
The Values Described: | |
---|---|
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. |
Inherit: | Inherits this property from its parent element. |
HTML file: | Displayed by browser: | |||
---|---|---|---|---|
<style>
div { width: 100px; height: 100px; background-color: red; position: relative; padding: 5px; -webkit-animation: mymove 3s; /* Chrome, Safari, Opera */ -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation: mymove 3s; animation-iteration-count: 2; } div.none {animation-fill-mode: none;} div.for {animation-fill-mode: forwards;} div.back {animation-fill-mode: backwards;} div.both {animation-fill-mode: both;} div { /* The animation code for Chrome, Safari, Opera*/ @-webkit-keyframes mymove { from {top: 0px;} to {top: 200px;} } /* The animation code in Standard syntax*/ @keyframes mymove { from {top: 0px;} to {top: 200px;} } </style> <body> <div>This is none</div> <div>This is forwards</div> <div>This is backwards</div> <div>This is both</div> </body> |
None
|
Forwards
|
Backwards
|
Both
|
Note: The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.