Skip to content
Related Articles

Related Articles

HTML | DOM Style transitionDuration Property

View Discussion
Improve Article
Save Article
Like Article
  • 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.


  • 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
    • Internet Explorer 10
    • Firefox 16
    • Opera 12.1
    • Safari 6.1

    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :

    Start Your Coding Journey Now!