CSS | transition-duration Property

Last Updated : 09 Aug, 2019

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:

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

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

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