Search within TutorialsPark

CSS3 animation-direction Property


To specify whether the animation should be played backward on alternate cycles .


Definition and Notes.

1. The CSS3 animation-direction property specifies whether a CSS animation with more than one cycle should always go the same direction or should reverse direction on every other cycle.

2. The possible values are normal , reverse , alternate , alternate-reverse.


Syntax:

CSS3 animation-direction property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- The values must be specified before the animation begins, it won't affect after the animation is set to play.

Property Values

Value Description
normal Every iteration of the animation plays in forward direction. Its the default value.
reverse Iteration are performed in the reverse order from the defined by @keyframe rule
alternate Beginning from 1, odd cycles are performed in normal direction while even cycle are run in reverse direction.
alternate-reverse Beginning from 1, all odd cycles are performed in reverse, and even cycles in normal direction.

Specifications

Specs Value
Name animation-direction
Value normal | alternate [, normal | alternate]*
Initial Value normal
Applies to block-level and inline-level elements
Javascript syntax object.style.animationDirection="reverse"
Inherited No
Computed Value Same as declared value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.