animation-direction property in CSS

A simple animation-direction property example:

animation-direction: alternate;

Laboratory

description & Usage

The animation-direction property directs the animation up, down, right and left in order to run.

#	Description
Default Value	normal
Inherited	no
Animatable	ض
Version	CSS3
JavaScript syntax	object.style.animationDirection="reverse"

The numbers inserted in the browser fields indicate the version that supports the animation-direction property.

#	Chrome	Edge	Firefox	Safari	Opera
animation-direction

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

Values	Description
normal	The animation runs in the default and correct direction (forward).
reverse	The animation is executed in reverse direction.
alternate	The start of the animation is first forward and then backward.
alternate-reverse	The start of the animation is first backwards and then forwards.
initial	Adds this value to its default property.
inherit	It inherits this value from its parent tag.

CSS tutorial: CSS animations

HTML DOM reference: animationDirection property