Skip to content
Related Articles

Related Articles

HTML | DOM Style transitionDuration Property
  • Last Updated : 02 Aug, 2019

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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

    • Before Transition:
    • After Transition:

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

    • Google Chrome 26
    • Internet Explorer 10
    • Firefox 16
    • Opera 12.1
    • Safari 6.1

    full-stack-img




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :