< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


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



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.

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 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

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 first relevant keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to

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


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


 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.


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

Related specifications

Specification Status Related Changes
CSS Animation W3C Working Draft

See also

Other articles

External resources


This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article