Style animationDirection Property
Style ObjectExamples
Change the animationDirection property of the <div> element:
document.getElementById("myDIV").style.animationDirection="reverse";
Try it Yourself »
Definition and Usage
The animationDirection property sets or returns whether the animation plays in reverse alternately when looping.
Note:If the animation is set to play only once, this property will have no effect.
Browser Support
Only Firefox supports the animationDirection property.
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 plays normally. |
| reverse | The animation plays in reverse. |
| alternate | The animation plays forward in odd iterations (1, 3, 5...) and in reverse in even iterations (2, 4, 6...). |
| alternate-reverse | The animation plays in reverse in odd iterations (1, 3, 5...) and forward in even iterations (2, 4, 6...). |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | normal |
|---|---|
| Return value: | A string, representing the element's animation-direction property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference:animation-direction property
Other Extensions