The animation-delay property in CSS is used to specify a delay for the start of an animation. This allows you to control when an animation sequence begins after it is applied to an element, creating staggered or timed effects without complex JavaScript. A positive value will delay the start, while a negative value will begin the animation immediately from that point in its cycle.
Example 1: Simple Positive Delay
/* This CSS defines a simple fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* The .box element will start the fadeIn animation after a 2-second delay. */
.box {
width: 100px;
height: 100px;
background-color: steelblue;
animation-name: fadeIn;
animation-duration: 3s;
animation-delay: 2s; /* Delays the start of the animation by 2 seconds */
animation-fill-mode: forwards;
}
Explanation: This code applies a fadeIn animation to the .box element. The animation-delay: 2s; rule makes the element wait for 2 seconds before it starts fading in.
Example 2: Negative Delay
/* A simple slide-in animation from left to right */
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* The .card element starts the slideIn animation 1 second into its cycle. */
.card {
width: 150px;
height: 100px;
background-color: #FFD700;
animation-name: slideIn;
animation-duration: 4s;
animation-delay: -1s; /* Starts the animation 1 second from its beginning */
}
Explanation: A negative animation-delay of -1s causes the slideIn animation to begin immediately, but it starts as if it has already been running for 1 second. This is useful for synchronizing animations that have already started.
Example 3: Staggered Animation Delay
/* A simple bounce animation */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Each dot has a different animation-delay to create a staggered effect. */
.dot {
width: 20px;
height: 20px;
background-color: #e91e63;
border-radius: 50%;
display: inline-block;
animation: bounce 1.5s infinite;
}
.dot:nth-child(2) {
animation-delay: 0.2s; /* Second dot is delayed */
}
.dot:nth-child(3) {
animation-delay: 0.4s; /* Third dot has a longer delay */
}
Explanation: This example demonstrates how to create a staggered or sequential animation effect. Each .dot element has the same bounce animation, but the animation-delay is progressively increased for each subsequent element, making them bounce one after another.
Example 4: Delay for Multiple Animations
/* First animation: change color */
@keyframes changeColor {
from { background-color: rebeccapurple; }
to { background-color: lightgreen; }
}
/* Second animation: rotate the element */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Apply multiple animations with different delays */
.shape {
width: 100px;
height: 100px;
animation-name: changeColor, rotate;
animation-duration: 4s, 5s;
animation-delay: 1s, 3s; /* 1s delay for changeColor, 3s delay for rotate */
animation-iteration-count: infinite, infinite;
}
Explanation: An element can have multiple animations applied at once. The animation-delay property accepts a comma-separated list of values to set a different delay for each corresponding animation listed in animation-name.
Example 5: Using Milliseconds for Delay
/* A pulse animation that scales an element up and down */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* The .button element will start pulsing after 500 milliseconds. */
.button {
padding: 15px 30px;
background-color: #4CAF50;
color: white;
border: none;
animation: pulse 2s infinite;
animation-delay: 500ms; /* Delay specified in milliseconds */
}
Explanation: The animation-delay property can be specified in milliseconds (ms) for more precise timing. Here, the pulse animation on the .button is delayed by 500 milliseconds, or half a second.
Example 6: Delay on Hover
/* An animation that reveals an element */
@keyframes reveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
/* The animation is paused by default and plays on hover after a delay. */
.menu-item {
width: 200px;
padding: 10px;
background: #f4f4f4;
animation: reveal 1s forwards;
animation-play-state: paused; /* Animation does not run initially */
}
.menu-item:hover {
animation-play-state: running; /* Animation runs on hover */
animation-delay: 0.3s; /* A short delay before the reveal starts */
}
Explanation: This code shows how animation-delay can be used with user interaction like a hover. The reveal animation is initially paused and only plays when the user hovers over the .menu-item, starting after a brief 0.3-second delay.
Example 7: Zero Delay
/* An animation for a loading spinner */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* The .loader element starts its spin animation immediately. */
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 0s; /* Explicitly sets no delay */
}
Explanation: Setting animation-delay: 0s; explicitly states that the animation should start immediately once it is applied to the element. This is the default behavior if the property is not specified, but it can be useful for overriding other styles.