animation-direction property

The animation-direction property specifies a direction of an animation. By default, the animation will only repeat 1 time and then return to the original state, then if animation-delay is specified, it will wait for the specified time and then start the cycle over again.

This property allows you to change this behavior, for example, so that the animation after finishing remains in the place where it ended, and does not jump to the starting position.

You can also set this behavior: the animation will reach the extreme point and return back (as in transition). See the description below.

Syntax

selector {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Values

Value	Description
`reverse`	The animation will play in reverse.
`alternate`	The animation will play first in forward and then in reverse direction (like a transition).
`alternate-reverse`	The animation will play from the end position to the start position and back. This is essentially the `alternate` and `reverse` values in one bottle.
`normal`	The animation will play from start to finish, and after finishing it will jump back to the starting position.

Default value: normal.

Example

Now the element will move in one direction and then return back, since the value is set to alternate. At the same time, animation-duration has a value of 3 seconds and this means that the movements "there" and "back" will last 3 seconds:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Example

Now the element will move in the opposite direction (should be from left to right, but will be from right to left):

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Example

Now the element will move back and forth, but in the opposite direction (should start on the left, but will start on the right):

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

animation-direction property

Syntax

Values

Example

Example

Example

See also