| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The animation-delay property in CSS specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. This property can be particularly useful when you want to stagger animations or control the timing of multiple animations within a sequence.
Syntax
animation-delay: time;
timecan be specified in seconds (s) or milliseconds (ms).
Examples
Example 1: Basic Usage
Let’s animate a simple box element. We’ll use the animation-delay property to start the animation after 2 seconds.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Delay Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS (styles.css):
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 3s forwards;
animation-delay: 2s;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
In this example, the blue box will start moving 2 seconds after the page loads, taking 3 seconds to complete the animation.
Example 2: Multiple Animations with Different Delays
This example demonstrates how different elements can have animations with different delays.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Animations with Delay</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>
CSS (styles.css):
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
animation: move 3s forwards;
}
.box1 {
animation-delay: 0s;
}
.box2 {
animation-delay: 1s;
}
.box3 {
animation-delay: 2s;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
In this example, the three boxes will start their animations at different times. The first box starts immediately, the second one starts after 1 second, and the third one starts after 2 seconds.
Example 3: Using Negative Values
Using a negative value for ‘animation-delay‘ can be useful if you want the animation to start partway through. For instance, if you set ‘animation-delay' to ‘-1s‘ for an animation with a duration of ‘3s‘, the animation will start 1 second into the animation.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Negative Animation Delay</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS (styles.css):
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 3s forwards;
animation-delay: -1s;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
In this case, the animation will start immediately but will be 1 second into the 3-second animation, effectively making it complete in 2 seconds.
The animation-delay property is a powerful tool in CSS animations, allowing for precise control over the timing of animations. By using positive, zero, or negative values, you can create a variety of effects and coordinate multiple animations seamlessly.
