HTML - DOM Style Object transitionDelay Property

Quiz

HTML DOM Style Object transitionDelay property sets or returns the delay time in seconds or milliseconds after which transition effect will start.

Syntax

Set the transitionDelay property:

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

Get the transitionDelay property:

object.style.transitionDelay;

Property Values

Value	Description
time	It represents the time to wait in seconds or milliseconds before the start of transition effect. 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 transition delay property of an element.

Example of HTML DOM Style Object 'transitionDelay' Property

The following example sets the delay time as two seconds which means on hovering over div section after clicking on button will have a delay of two seconds before showing transition effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transitionDelay Property
    </title>
    <style>
        #transition {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid black;
            margin: auto;
            background-color: azure;
            transition: all 1s linear;
        }
        #transition:hover {
            padding: 50px;
            height: 250px;
            width: 250px;
            border: 2px solid yellow;
            margin: auto;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Click to set transition delay.
    </p>
    <button onclick="fun()">
        Set Transition Delay
    </button>
    <section id="transition">
        Hover over div to and wait for two 
        seconds to see transition effect.
    </section>
    <script>
        function fun() {
            document.getElementById("transition")
                .style.transitionDelay = "2s";
        } 
    </script>
</body>
</html>

Supported Browsers

Property
transitionDelay	Yes 26	Yes 12	Yes 16	Yes 9	Yes 12.1

html_dom.htm

Print Page