HTML Style Animation Direction Property

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

Browser Support

Return the animationDirection property:Syntax

var v = object.style.animationDirection;

Set the animationDirection property:

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

Property Values

normal(Default)

play animation in normal way

reverse

play animation in reverse direction

alternate

play animation as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)

alternate-reverse

play animation in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)

Technical Details

Default Value:	normal
Return Value:	A string representing the animation-direction property
CSS Version	CSS3

Example

The following code shows how to change the animationDirection property of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!-- ww w  .ja  v a 2s .  c o m-->
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

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

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

<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitAnimationDirection = "reverse";  // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationDirection = "reverse";
}
</script>

<div id="myDIV"></div>

</body>
</html>