Open In App

CSS transition-delay Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 the transition animation.
  • initial: It sets the transition-delay property to its default value. 
  • inherit: This property is inherited from its parent element.

Example: In this example, we are using the transition-delay: time property.

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: 

Example: In this example, we are using the transition-delay: initial property.

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: 

Example: In this example, we are using transition-delay: inherit property.

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


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads