Style animationDirection Property
Example
Changing the animationDirection property of a <div> element:
document.getElementById("myDIV").style.animationDirection = "reverse";
Try it Yourself »
Definition and Usage
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.
Browser Support
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 | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Syntax
Return the animationDirection property:
object.style.animationDirection
Set the animationDirection property:
object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
Property Values
| 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 |
Technical Details
| Default Value: | normal |
|---|---|
| Return Value: | A String, representing the animation-direction property of an element |
| CSS Version | CSS3 |
Related Pages
CSS reference: animation-direction property
❮ Style Object
