HTML | DOM Style transitionDuration Property

The Style transitionDuration property in HTML DOM is used to set or return the length of time(in seconds or milliseconds) to complete the transition effect.

Syntax:

Return the transitionDuration property:

object.style.transitionDuration

Set the transitionDuration:

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

Property Values:

time:It is used to specify how much time it will take to complete transition effect.The default value is 0(no transition effect).
initial: Sets the element to its initial position.
inherit: It is used to set property from its parent element.

Example: Set transitionDuration property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML | DOM Style transitionDuration Property 
    </title> 
    <style> 
        #element { 
            width: 100px; 
            height: 70px; 
            background: green; 
            transition-property: width; 
        } 
        
        #element:hover { 
            width: 400px; 
            height: 100px; 
        } 
    </style> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>TransitionDuration Property</h2> 
    
<p> 
        Move mouse over the green box and it will change! 
    </p>
 
    <div id="element"> 
        <h3>transition-duration:5s</h3> 
    </div> 
    <script> 
        function myFunction() { 
            
            // Set transitionDuration 5 second. 
            document.getElementById( 
            "element").style.transitionDuration = 
            "5s"; 
        } 
        myFunction() 
    </script> 
</body> 
</html>

Output:

Before Transition:

After Transition:

Supported Browsers: The browser supporte by HTML | DOM Style transitionDuration Property are listed bwlow:

Google Chrome 26
Edge 12
Internet Explorer 10
Firefox 16
Opera 12.1
Safari 9

HTML | DOM Style transitionDuration Property

Explore