Property Description
The animation-fill-mode property specifies what styles apply for the element when the animation is not playing (finished, or during a "delay").
This property has the following syntax:
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | (default) Specifies that the animation will not apply any styles to the target before or after it is executing |
| forwards | Specifies that when the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
| backwards | Specifies that 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 | Specifies that the animation will follow the rules for both forwards and backwards |
| initial | Specifies that the value of the property should be set to the default value |
| inherit | Specifies that the value of the property should be inherited from the parent element |
Examples
This example shows the use of the animation-fill-mode property:
<style type="text/css">
div.animate {
width:50px;
height:50px;
color:white;
padding:2px;
background:blue;
position:relative;
}
#test1 {
animation-name:boxmove;
animation-duration:5s;
animation-iteration-count: 1;
animation-fill-mode: none;
/* Firefox */
-moz-animation-name:boxmove;
-moz-animation-duration:5s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: none;
/* Safari and Google Chrome */
-webkit-animation-name:boxmove;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-moz-animation-fill-mode: none;
}
#test2 {
animation-name:boxmove;
animation-duration:5s;
animation-iteration-count: 1;
animation-fill-mode: forward;
/* Firefox */
-moz-animation-name:boxmove;
-moz-animation-duration:5s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forward;
/* Safari and Google Chrome */
-webkit-animation-name:boxmove;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-moz-animation-fill-mode: forward;
}
@keyframes boxmove
{
from {left:0px;}
to {left:210px;}
}
@-moz-keyframes boxmove /* Firefox */
{
from {left:0px;}
to {left:210px;}
}
@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
from {left:0px;}
to {left:210px;}
}
</style>
animation-fill-mode: none;
<div id="test1" class="animate"></div><br/>
animation-fill-mode: forward;
<div id="test2" class="animate"></div>This produces the following result:
animation-fill-mode: none;
animation-fill-mode: forward;
animation-fill-mode: forward;
Explanation: Due to the 'none' setting in 'test1', the animation returns to the start. For 'test2', the animation stays where it ended due to the 'forward' setting.
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 4.0 -webkit- | 16.0 5.0 -moz- |
10.0 | 4.0 -webkit- | 12.1 12.0 -o- 15.0 -webkit- |
Miscellaneous Information
| Inherited: | No |
|---|---|
| Defined In: | CSS3 |
| Default Value: | none |