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
How to delay an animation with CSS
To delay an animation, use the CSS animation-delay property. This property specifies the amount of time to wait before starting the animation sequence.
Syntax
selector {
animation-delay: time;
}
Possible Values
| Value | Description |
|---|---|
time |
Specifies the delay time in seconds (s) or milliseconds (ms) |
0s |
Default value - no delay |
| Negative values | Animation starts immediately but from a later point in the cycle |
Example: Basic Animation Delay
The following example delays an animation by 2 seconds before it starts −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
background-color: yellow;
animation-name: colorChange;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: infinite;
margin: 20px;
}
@keyframes colorChange {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
A yellow box appears and waits for 2 seconds, then starts animating from green to blue color repeatedly.
Example: Negative Delay Value
Using negative values starts the animation immediately but from a specific point in the animation cycle −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: moveRight 4s linear infinite;
animation-delay: -2s;
margin: 20px;
}
@keyframes moveRight {
0% { transform: translateX(0px); }
100% { transform: translateX(200px); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
A red box starts moving immediately from the middle of its animation path (100px position) instead of starting from the beginning.
Conclusion
The animation-delay property controls when an animation begins. Use positive values to delay the start, or negative values to start the animation from a specific point in its cycle.
Updated on: 2026-03-15T12:40:22+05:30
84 Views
Advertisements