Changing the animationDirection property of a <div> element:
The animationDirection property sets or returns whether or not the animation should play in reverse on alternate cycles.
Note: If the animation is set to play only once, this property will have no effect.
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by Moz specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
animationDirection | Not supported | Not supported | 16.0 5.0 Moz |
Not supported | Not supported |
Return the animationDirection property:
Set the animationDirection property:
Value | Description |
---|---|
normal | Default value. The animation should be played as normal |
reverse | The animation should play in reverse direction |
alternate | The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...) |
alternate-reverse | The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Default Value: | normal |
---|---|
Return Value: | A String, representing the animation-direction property of an element |
CSS Version | CSS3 |
CSS reference: animation-direction property