animation-direction
The animation-direction CSS property defines whether or not the animation should play in reverse on some or all cycles.
CSS
animation-direction: value;
JS
object.style.animationDirection = "value";
Values
<'animation-direction'> = <single-animation-direction>#
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
normal
All iterations of the animation are played as specified. Intial.
reverse
All iterations of the animation are played in the reverse direction from the way they were specified.
alternate
The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
alternate-reverse
The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.
Initial
alternate
alternate-reverse
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-direction: alternate-reverse;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<p>alternate-reverse</p>
</body>
</html>
normal
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-direction: normal;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<p>normal</p>
</body>
</html>
reverse
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-direction: reverse;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<p>reverse</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: mykeyframes;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.animationDirection = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="alternate">
<input onmouseover="mouseover(value)" type="button" value="alternate-reverse">
<input onmouseover="mouseover(value)" type="button" value="normal">
<input onmouseover="mouseover(value)" type="button" value="reverse">
<p>animation-direction</p>
</body>
</html>
Internal
External