Skip to content
Related Articles

Related Articles

CSS | transition-duration Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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. 

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:

Before Transition:

 

After Transition:

 

  • initial: It is used to set transition-duration property to its default value. The default value of transition-duration is 0. 

Syntax:

transition-duration: initial;

Example: 

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:

Before Transition:

 

After Transition:

 

  • inherit: The value of transition-duration property set from its parent. 

Syntax:

transition-duration: inherit;

Example 3: 

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: 

Before Transition:

 

After Transition:

 

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!