This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

animation-direction

Summary

Defines whether an animation should run in reverse on some or all cycles.

Overview table

Initial value
normal
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-direction: alternate
  • animation-direction: alternate-reverse
  • animation-direction: normal
  • animation-direction: reverse

Values

normal
All iterations of the animation are played as specified.
reverse
All iterations of the animation are played in the reverse direction from the way they were specified. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.
alternate
The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction, thus reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd).
alternate-reverse
The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction, again reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd).

Examples

A repeating pulse animation that shrinks and dims an element, then restores it. Change the animation-direction from normal to a different keyword value to see the effect.

div.selected {
    animation-name: pulse;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    from {
        transform : scale(1) translateX(0);
        opacity : 1;
    }
    to {
        transform : scale(0.75) translateX(0);
        opacity : 0.25;
    }
}

View live example

Usage

 Can also be a comma-separated list of directions, e.g., reverse, normal, alternate, where each direction is applied to the corresponding ordinal position value of the animation-name property.

Related specifications

CSS Animations
W3C Working Draft

See also

Other articles

Attributions