Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set a delay for the CSS transition effect
The CSS transition-delay property is used to specify a delay before a transition effect begins. This allows you to control when the transition starts after the trigger event occurs.
Syntax
selector {
transition-delay: time;
}
Possible Values
| Value | Description |
|---|---|
time |
Specifies the delay in seconds (s) or milliseconds (ms) |
0 |
No delay (default) |
Example
The following example demonstrates a 2-second delay before the width transition begins −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: width 3s;
transition-delay: 2s;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
div:hover {
width: 350px;
}
</style>
</head>
<body>
<h1>CSS Transition Delay</h1>
<p>Hover over the blue box. The width change will start after a 2-second delay.</p>
<div>Hover Me</div>
</body>
</html>
A blue box with white text "Hover Me" appears. When hovered, there is a 2-second delay before the box starts expanding from 150px to 350px width over 3 seconds.
Conclusion
The transition-delay property provides precise control over when transitions begin. Use it to create more sophisticated animation sequences or to give users time to register the trigger event before the visual change occurs.
Updated on: 2026-03-15T12:38:49+05:30
194 Views
Advertisements