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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

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