HTML - DOM Style Object animationDirection Property

Quiz

HTML DOM Style Object animationDirection property sets the direction of animation.It's default value is normal. For this property to be applicable, animation should not be set to play once.

Syntax

Given below are the syntax to get or set the property.

Set the property:

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

Get the property:

object.style.animationDirection;

Property Values

Below listed values are accepted by this property.

Value	Description
normal	This property value plays the animation normally, that is, in forward direction.
reverse	It plays animation in reverse direction.
alternate	It plays animation in normal and in reverse direction in alternate order where animation is in normal direction for odd time and in reverse direction for even time.
alternate-reverse	It is the opposite of alternate. In this, animation first plays in reverse direction then in normal direction.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents animation-direction property of the element.

Examples of HTML DOM Style Object 'animationDirection' Property

The following examples illustrates the animation-direction property.

Set Animation Direction to Normal and Reverse

In the following example we have set animation direction to normal and reverse.

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object animation-direction Property</title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 1s infinite reverse;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <p>Click to change the direction of animation.</p>
    <button onclick="normal()">Normal</button>
    <button onclick="reverse()">Reverse</button>
    <div id="animation"></div>
    <script>
        function normal() {
            document.getElementById("animation").style.animationDirection = "normal";
        }
        function reverse(){
            document.getElementById("animation").style.animationDirection = "reverse";
        }
    </script>
</body>
</html>

Set Animation Direction to Alternate and Alternate-Reverse

In the following example we have set animation direction to first alternate and then to alternate-reverse.

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object animation-direction Property</title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 1s infinite;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <p>Click to change the direction of animation.</p>
    <button onclick="alternate()">alternate</button>
    <button onclick="alternate_reverse()">alternate-reverse</button>
    <div id="animation"></div>
    <script>
        function alternate() {
            document.getElementById("animation").style.animationDirection = "alternate";
        }
        function alternate_reverse(){
            document.getElementById("animation").style.animationDirection = "alternate-reverse";
        }
    </script>
</body>
</html>

Supported Browsers

Property
animationDirection	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page