animation-fill-mode

Summary

Defines what values are applied by the animation outside the time it is executing (before and after the animation).

By default, an animation does not affect property values between the time it is applied (when the animation-name property is set on an element) and the time it begins execution (determined by the animation-delay property). Also, by default an animation does not affect property values after the animation ends (determined by the animation-duration property). The animation-fill-mode property can override this behavior.

Overview table

Initial value: none
Applies to: All elements, ::before and ::after pseudo-elements.
Inherited: No
Media: visual
Computed value: As specified.
Animatable: No

CSS Object Model Property
:

Percentages: N/A

Syntax

animation-fill-mode: backwards
animation-fill-mode: both
animation-fill-mode: forwards
animation-fill-mode: none

Values

none: Property values do not change before the animation starts, and they return to their original state when the animation ends. This is the default behavior.
forwards: When the animation ends (as determined by its animation-iteration-count), properties retain the values set by the final keyframe. If animation-iteration-count is zero, apply the values that would start the first iteration.

|[animation-direction](/css/properties/animation-direction)|[animation-iteration-count](/css/properties/animation-iteration-count)|last keyframe encountered| |:---------------------------------------------------------|:---------------------------------------------------------------------|:------------------------| |`normal`|`even` or `odd`|100% or `to`| |`reverse`|`even` or `odd`|0% or `from`| |`alternate`|`even`|0% or `from`| |`alternate`|`odd`|100% or `to`| |`alternate-reverse`|`even`|100% or `to`| |`alternate-reverse`|`odd`|0% or `from`|

backwards: If the animation is delayed by animation-delay, properties assume values set by the first keyframe while waiting for the animation to start. 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). When the animation ends, properties revert to their original state.

|[animation-direction](/css/properties/animation-direction)|first relevant keyframe| |:---------------------------------------------------------|:----------------------| |`normal` or `alternate`|0% or `from`| |`reverse` or `alternate-reverse`|100% or `to`|

both: Values set by the first and last keyframes are applied before and after the animation.

Examples

An example of a mobile-like interface in which two concurrent animations displace content with a banner header. Without any animations, both elements would overlay the same screen area. In the moveContent animation, the fill mode of forwards means its end state (moved downward) persists after it finishes executing. In the insertBanner animation, the fill mode of backwards means its start state (off-screen) takes precedence over the element’s CSS during the delay before the animation executes. (In the subsequent scrollBanner animation, the fill-mode is explicitly set to none to keep its initial state from overriding that of the previous animation.)

article {
    animation-name : moveContent;
    animation-duration : 1s;
    animation-delay : 4s;
    animation-iteration-count : 1;
    animation-fill-mode : forwards;
}

header {
    animation-name : insertBanner , scrollBanner;
    animation-duration : 1s , 20s;
    animation-delay : 4s , 5s;
    animation-fill-mode : backwards , none;
    animation-iteration-count : 1 , infinite;
}

@keyframes moveContent {
    from { transform : translateY(0em) }
    to   { transform : translateY(3em) }
}

@keyframes insertBanner {
    from { transform : translateY(-6em) }
    to   { transform : translateY(0em) }
}

@keyframes scrollBanner {
    from { transform : translateX(0) }
    17%  { transform : translateX(0%) }
    20%  { transform : translateX(-20%) }
    37%  { transform : translateX(-20%) }
    40%  { transform : translateX(-40%) }
    57%  { transform : translateX(-40%) }
    60%  { transform : translateX(-60%) }
    77%  { transform : translateX(-60%) }
    80%  { transform : translateX(-80%) }
    97%  { transform : translateX(-80%) }
    to   { transform : translateX(0%) }
}

View live example

Usage

 Can also be a comma-separated list of fill modes, e.g., forwards, none, backwards, where each fill mode is applied to the corresponding ordinal position value of the animation-name property.

Notes

This is an experimental specification, and therefore not completely finalized. Syntax and behavior are still subject to change in future versions.

Related specifications

CSS Animation: W3C Working Draft

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: Windows Internet Explorer API reference Article