Open In App
Related Articles

HTML | DOM Style transitionDuration Property

Improve Article
Save Article
Like Article

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. 


  • Return the transitionDuration property:
  • Set the 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.


<!DOCTYPE html>
        HTML | DOM Style transitionDuration Property
        #element {
            width: 100px;
            height: 70px;
            background: green;
            transition-property: width;
        #element:hover {
            width: 400px;
            height: 100px;
    <h2>TransitionDuration Property</h2>
        Move mouse over the green box and it will change!
    <div id="element">
        function myFunction() {
            // Set transitionDuration 5 second.
            "element").style.transitionDuration =


  • 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

Last Updated : 05 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials