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 start of an animation with CSS
The CSS animation-delay property is used to set a delay before an animation starts. This property allows you to control when an animation begins, creating staggered effects or waiting for user interactions.
Syntax
selector {
animation-delay: time;
}
Possible Values
| Value | Description |
|---|---|
time |
Specifies the delay time in seconds (s) or milliseconds (ms) |
0 |
Default value - no delay |
| Negative values | Animation starts immediately but partway through the animation cycle |
Example: Basic Animation Delay
The following example demonstrates a 2-second delay before the animation starts −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 100px;
background-color: yellow;
margin: 20px;
animation-name: colorChange;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes colorChange {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
<p>Watch the box - it will wait 2 seconds before changing color!</p>
</body>
</html>
A yellow box appears on the page. After 2 seconds, it animates from green to blue over 2 seconds.
Example: Multiple Elements with Different Delays
This example shows how to create a staggered animation effect using different delay values −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
margin: 20px;
}
.circle {
width: 60px;
height: 60px;
background-color: #ff6b6b;
border-radius: 50%;
animation: bounce 1s infinite alternate;
}
.circle:nth-child(1) { animation-delay: 0s; }
.circle:nth-child(2) { animation-delay: 0.2s; }
.circle:nth-child(3) { animation-delay: 0.4s; }
.circle:nth-child(4) { animation-delay: 0.6s; }
@keyframes bounce {
from { transform: translateY(0px); }
to { transform: translateY(-30px); }
}
</style>
</head>
<body>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>
Four red circles appear in a row. They bounce up and down with staggered timing, creating a wave-like effect as each circle starts bouncing 0.2 seconds after the previous one.
Conclusion
The animation-delay property is essential for creating sophisticated animation sequences. Use positive values to delay the start, or combine different delays on multiple elements to create engaging staggered effects.
Updated on: 2026-03-15T12:44:40+05:30
207 Views
Advertisements