Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-direction Property

Sets or retrieves the playback direction of the associated animation effect.

The property is read/write with a default value of normal; the CSS attribute is not inherited.

The animation-direction property defines whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

animation-direction is specified with any of the possible values above.

A value of normal means the animation plays forwards each cycle.

A value of reverse means the animation plays backwards each cycle.

A value of alternate means the animation reverses direction each cycle, with the first iteration being played forwards.

A value of alternate-reverse means the animation reverses direction each cycle, with the first iteration being played backwards.

Any other value invalidates the CSS declaration.

NOTE: While the separate animation properties can be set individually, the shorthand animation property offers a convenient option to set all animation properties at once.

The following basic animation examples demonstrate use of the animation-direction property.

Basic Animation: Normal and Reverse Playback Run Sample | View Source

Basic Animation: Slide and Resize Run Sample | View Source

For a brief overview, please see Understanding and Using CSS Animations.

animation, animation-composition, animation-delay, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function