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>                     