HTML DOM Style animationDirection Property

HTML Web Development Front End Technology

The animationDirection property is used to specify the direction of animation which may be forwards, backwards or alternating.

Syntax

Following is the syntax for −

Setting the animationDirection property −

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

Values

Following are the values −

Value	Description
Normal	This is the default value indicating that the animation should play normal.
Reverse	For indicating that the animation should play in reverse.
Alternate	For making the animation played as normal on odd time and reverse direction in even time.
alternate-reverse	This is the reverse of the alternate and plays e animation in reverse direction every odd time and in a normal direction every even time.
Initial	For setting this property to initial value
nherit	Inherits this property from its parent element.

Example

Let us look at the example for the animationDirection property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      width: 50px;
      height: 80px;
      background: skyblue;
      position: relative;
      animation: high 5s infinite;
      z-index:-1;
      animation-direction:normal;
   }
   @keyframes high {
      0% {left: 0px; top: 0px;}
      25% {background-color: lightblue; left: 0px; top: 0px;}
      50% {background-color: lightgreen; left: 550px; top: 80px;}
      75% {background-color: lightblue; left: 0px; top: 80px;}
      100% {left: 0px; top: 0px;}
   }
</style>
<script>
   function changeDir(){
      document.getElementById("DIV1").style.animationDirection="alternate-reverse"
   }
</script>
</head>
<body>
<h1>animationDirection property example</h1>
<div id="DIV1"></div>
<p>Change the animation direction of the div by clicking the below button</p>
<button onclick="changeDir()">CHANGE DIRECTION</button>
</body>
</html>