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

Microsoft Developer Network: Windows Internet Explorer API reference Article