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:

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

Output:

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

Example:

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

Output:

inherit: This property is inherited from its parent element.

Example:

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