Style animationDirection attribute

Definition and usage

animationDirection Sets or returns whether the animation should play in reverse in an alternating loop.

Note:If the animation is set to play only once, this property will be invalid.

Example

Change the animationDirection property of the <div> element:

document.getElementById("myDIV").style.animationDirection = "reverse";

Try it yourself

Syntax

Return the animationDirection property:

object.style.animationDirection

Set the animationDirection property:

object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"

Attribute value

Value Description
normal Default value. The animation should play normally.
reverse The animation should play in reverse.
alternate The animation will play in forward on every odd number (1, 3, 5, etc.) and in reverse on every even number (2, 4, 6, etc...).
alternate-reverse The animation will play in reverse on every odd number (1, 3, 5, etc.) and in forward on every even number (2, 4, 6, etc...).
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: normal
Return value: String indicating the element's animation-direction ɗanin.
CSS version: CSS3

Browser support

animationDirection It is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
tamin tamin tamin tamin tamin 11

Yanar gizo kan

CSS Tsaro kan kiwam:animation-direction ɗanin