CSS | transition-delay Property

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>                     

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

Recommended Posts: