Skip to content
Related Articles

Related Articles

Improve Article
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>                    

    Output:

    • Before Transition:

      Output:

    • After Transition:

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

  • Chrome 26.0, 4.0 -webkit-
  • Edge 10.0
  • Firefox 16.0, 4.0 -moz-
  • Opera 12.1, 10.5 -o-
  • Safari 6.1, 3.1 -webkit-



My Personal Notes arrow_drop_up
Recommended Articles
Page :