The CSS transition-delay property specifies the amount of time to wait before a transition effect starts. It allows you to delay the beginning of a transition after a property value changes.
- Controls when a transition starts.
- Accepts time values in seconds (s) or milliseconds (ms).
- A positive value delays the transition effect.
- A value of 0s starts the transition immediately.
Syntax:
transition-delay: time | initial | inherit;Property Values
- time: Specifies the delay duration in seconds (s) or milliseconds (ms).
- initial: Sets the property to its default value, 0s.
- inherit: Inherits the transition-delay value from the parent element.
Examples of CSS transition-delay Property
Here are some examples discussed:
Example 1: Using the transition-delay: time property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition-delay Property</h2>
<div>
<p>transition-delay: 2s</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: Using the transition-delay: initial property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition-delay Property</h2>
<div>
<p>transition-delay: initial</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 3: Using transition-delay: inherit property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition-delay Property</h2>
<div>
<p>transition-delay: inherit</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Note: The default value for the transition-delay property is zero.