Related Articles

Related Articles

CSS | transition-delay Property
  • Difficulty Level : Easy
  • Last Updated : 21 Jan, 2019

The transition-delay property in CSS is used to specify the time to start the transition. The value of transition-delay set in terms of seconds or milliseconds.

Syntax:

transition-delay: time|initial|inherit;

Property Values:

  • time: It specifies the length of time (in seconds or milliseconds) to start transition animation.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  • initial: It sets the transition-delay property to its default value.

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  • inherit: This property is inherited from its parent element.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

Note: The default value for the transition-delay property is zero.

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

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :