HTML - DOM Style Object animationDelay Property

Quiz

HTML DOM Style Object animationDelay Property is used to set the delay time in seconds or milliseconds after which animation should start.

Syntax

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

Set the property:

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

Get the property:

object.style.animationDelay;

Property Values

Below listed values are accepted by this property.

Value	Description
time	It represents the time to wait in seconds or milliseconds before the start of animation. it's default value is 0.
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-delay property of the element.

Example of HTML DOM Style Object 'animationDelay' Property

In this example we have used animation delay to 5 seconds.

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

Supported Browsers

Property
animationDelay	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page