HTML - DOM Style Object animationDuration Property

Quiz

HTML DOM Style Object animationDuration property is used to specify the length of time it will take for an animation to complete one cycle. It's default value is set to 0.

Syntax

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

Set the property:

object.style.animationDuration= "time | initial | inherit";

Get the property:

object.style.animationDuration;

Property Values

Below listed values are accepted by this property.

Value	Description
time	It is used to specify the time for which animation will complete one cycle.
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-duration property of the element.

Examples of HTML DOM Style Object 'animationDuration' Property

The following examples illustrates animation duration property.

Set the Animation Duration

In the following example we have set the animation duration.

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

Change the Speed of Animation

In this example we have changed the speed of animation by varying duration time.

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

Supported Browsers

Property
animationDuration	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page