Skip to content
Related Articles

Related Articles

CSS | transition-delay Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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: 

HTML




<!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-delay: 2s</p>
 
  
        </div>
    </body>
</html>                   

Output: 

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

Example: 

HTML




<!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-delay: initial</p>
 
  
        </div>
    </body>
</html>                   

Output: 

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

Example: 

HTML




<!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 and above
  • Edge 12.0 and above
  • Firefox 16.0 and above
  • Internet Explorer 10 and above
  • Safari 9.0 and above
  • Opera 12.1 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!