CSS3 Animations: Animation-Fill-Mode

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.

Back button Table of Contents Next button