CSS transition-delay Property
Last Updated : 29 Aug, 2024
Improve
The transition-delay property in CSS specifies the delay time before a transition effect begins. It controls when the transition starts after a change has been initiate
Use transition-delay to sequence transitions or to synchronize them with other animations or events on the page. It allows for precise timing control over animation effects.
Syntax
transition-delay: time | initial | inherit;Property Values
- time: Specifies the delay duration in seconds (s) or milliseconds (ms).
- initial: Sets the transition-delay property to its default value, which is 0.
- inherit: Inherits the transition-delay property from its parent element.
Example: In this example, we are using the transition-delay: time property.
<!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.
<!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.
<!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+
- Microsoft Edge 12.0+
- Mozilla Firefox 16.0+
- Internet Explorer 10+
- Opera 12.1+
- Safari 9.0+
