animationDirection Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationDirection

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. animationDirection

Description

The animationDirection property sets or gets whether or not 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 value. The animation should be played as normal.
reverse play in reverse direction
alternate play as normal every odd time and in reverse direction every even time
alternate-reverse play in reverse direction
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: normal
Return Value: A String, representing the animation-direction property of an element
CSS VersionCSS3

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {// w w  w  .  j a  v a  2  s. co  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>

Related Tutorials