O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

animation-direction

Values:

normal | alternate [, normal | alternate]*

Initial value:

normal

Applies to:

Block-level and inline-level elements

Inherited:

No

Computed value:

Same as declared value

Description:

Specifies whether a CSS animation with more than one cycle (see animation-iteration-count) should always go the same direction or should reverse direction on every other cycle. For example, an alternate animation that moves an element 300 pixels to the right would move it 300 pixels to the left on every other cycle, thus returning it to its starting position. Setting that same animation to normal would cause the element to move 300 pixels right, then jump back to its starting place and move 300 pixels right again, and over and over until the animation stops (assuming it ever does).

Examples:

body {animation-direction: alternate, normal, normal;}
#scanner {animation-direction: normal;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required