Javascript DOM CSS Style animationDirection Property

Introduction

Changing the animationDirection property of a <div> element: 

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

Click the button to reverse the direction of the animation.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {//  w w w  .  j a v  a2s. c om
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>


<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("myDIV").style.animationDirection = "reverse";
}
</script>
<div id="myDIV"></div>

</body>
</html>

The animationDirection property sets or gets whether the animation should play in reverse on alternate cycles.

If the animation is set to play only once, this property will have no effect.

Property Values

Value Description
normalDefault. play as normal
reverse play in reverse direction
alternate play as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)
alternate-reverse play in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The animationDirection property returns a String representing the animation-direction property of an element.




PreviousNext

Related