HTML - DOM Style Object transitionDuration Property

Quiz

HTML DOM Style Object transitionDuration property sets or returns amount of time in seconds or milliseconds, a transition effect takes to complete.

Syntax

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

Set the transitionDuration property

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

Get the transitionDuration property

object.style.transitionDuration;

Property Values

Value	Description
time	It is used to specify amount of time in seconds or milliseconds taken by transition effect to complete. It's default value is 0 that means there will be no transition.
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 the transition duration property of an element.

Example of HTML DOM Style Object 'transitionDuration' Property

The following example sets the transition duration of div element which changes the speed of transition.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transitionDuration Property
    </title>
    <style>
        #transition {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid black;
            margin: auto;
            background-color: azure;
            transition: all 3s 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 duration.
    </p>
    <button onclick="fun()">
        Set Transition Duration
    </button>
    <section id="transition">
        Hover over div to see transition effect.
    </section>
    <script>
        function fun() {
            document.getElementById("transition")
                .style.transitionDuration = "1s";
        } 
    </script>
</body>
</html>

Supported Browsers

Property
transitionDuration	Yes 26	Yes 12	Yes 16	Yes 9	Yes 12.1

html_dom.htm

Print Page