Open In App
Related Articles

CSS transition-duration Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The transition-duration property in CSS is used to specify the length of time (in seconds or milliseconds) to complete the transition effect. 

Syntax:

transition-duration: time|initial|inherit;

Property Values:

  • time: It is used to specify the length of time (in seconds or milliseconds) to complete transition animation. 
  • initial: It is used to set transition-duration property to its default value. The default value of transition-duration is 0.
  • inherit: The value of transition-duration property set from its parent.  

Syntax:

transition-duration: time;

Example: 

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS transition-duration Property
    </title>
 
    <style>
        div {
            width: 100px;
            height: 70px;
            background: green;
            transition-property: width;
            transition-duration: 5s;
 
            /* For Firefox browser */
            -webkit-transition-property: width;
            -webkit-transition-duration: 5s;
            transition-delay: .2s;
            display: inline-block;
        }
 
        div:hover {
            width: 300px;
        }
    </style>
</head>
 
<body style="text-align:center;">
 
    <h1>GeeksforGeeks</h1>
 
    <h2>Transition Property</h2>
 
    <div>
        <p>transition-duration: 5s</p>
    </div>
</body>
</html>

                    

Output:

 

Example: In this example, we are using transition-duration: initial property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS transition-duration Property
    </title>
 
    <style>
        div {
            width: 100px;
            height: 80px;
            background: green;
            transition-property: width;
            transition-duration: initial;
 
            /* For Firefox browser */
            -webkit-transition-property: width;
            -webkit-transition-duration: initial;
            transition-delay: .2s;
            display: inline-block;
        }
 
        div:hover {
            width: 300px;
        }
    </style>
</head>
 
<body style="text-align:center;">
 
    <h1>GeeksforGeeks</h1>
 
    <h2>Transition Property</h2>
 
    <div>
        <p>transition-duration: initial;</p>
    </div>
</body>
</html>

                    

Output:

 

Example 3: In this example, we are using transition-duration: inherit property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS transition-duration Property
    </title>
 
    <style>
        div {
            width: 100px;
            height: 270px;
            background: green;
            transition-property: width;
            transition-duration: inherit;
            transition-timing-function: ease-in;
            transition-delay: .2s;
            display: inline-block;
        }
 
        div:hover {
            width: 500px;
        }
    </style>
</head>
 
<body style="text-align:center;">
 
    <h1>GeeksforGeeks</h1>
 
    <h2>Transition Property</h2>
 
    <div>
        <p>transition-duration: inherit</p>
    </div>
</body>
</html>

                    

Output: 

 

Supported Browsers: The browser supported by transition-duration property are listed below:

  • Chrome 26.0 and above
  • Edge 12.0 and above
  • Firefox 16.0 and above
  • Internet Explorer 10.0 and above
  • Opera 12.1 and above
  • Safari 9.0 and above


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads