CSS Animation Delay
CSS Animation Delay
In web design, animation effects are a very important part, making the page more vivid and attractive. CSS animations are a common way to create animation effects, and animation delay is an important property that controls when an animation starts. In this article, we’ll explore the usage of CSS animation delays in detail, including code examples.
1. Setting Animation Delay Using the animation-delay Property
animation-delay property is used to set a delay before an animation starts. It accepts a time value in seconds or milliseconds. Here is a simple sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: colorChange 2s infinite;
animation-delay: 1s;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In this example, we define an animation called colorChange that cycles the background color between red, green, and blue. By setting animation-delay: 1s;, we delay the animation for one second before starting.
2. Use Multiple Elements to Achieve Animation Effects with Different Delay Times
Sometimes, we want multiple elements on a page to animate sequentially with varying delay times. This can be achieved by setting different animation-delay properties. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation:colorChange 2s infinite;
}
.box:nth-child(2) {
animation-delay: 1s;
}
.box:nth-child(3) {
animation-delay: 2s;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Code running results:
In this example, we define three box elements with the same style. By setting different animation-delay properties, we set them to start the animation after 0 seconds, 1 second, and 2 seconds, respectively.
3. Dynamically Setting Animation Delays Using JavaScript
Sometimes we need to dynamically set the animation delay based on user actions or other conditions. This can be achieved using JavaScript. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: colorChange 2s infinite;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f; }
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="setDelay()">Set Delay</button>
<script>
function setDelay() {
var boxes = document.querySelectorAll('.box');
boxes.forEach(function(box, index) {
box.style.animationDelay = index + 's';
});
}
</script>
</body>
</html>
Code running results:
In this example, we define a button. When the user clicks the button, we dynamically set the animation-delay property of each box element using JavaScript, causing them to delay their animations sequentially according to their index values.
4. Using Keyframe Animation to Create Complex Delay Effects
In addition to simple color change animations, we can also use keyframe animations to create more complex delay effects. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: pulse 3s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
.box:nth-child(2) {
animation-delay: 1s; }
.box:nth-child(3) {
animation-delay: 2s;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Result of running the code:
In this example, we define a keyframe animation called pulse to cycle the box element between enlarging and shrinking. By setting different animation-delay properties, we can start the animation after 0 seconds, 1 second, and 2 seconds, respectively.
5. Control the animation play state using the animation-play-state property
In addition to delay time, we can also use the animation-play-state property to control the animation play state, including pausing and resuming. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: colorChange 2s infinite;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f; }
}
.paused {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="pauseAnimation()">Pause Animation</button>
<script>
function pauseAnimation() {
var box = document.querySelector('.box');
box.classList.add('paused');
}
</script>
</body>
</html>
Code Running Results:
In this example, we define a button. When the user clicks the button, JavaScript adds the paused class to the box element, pausing the animation. This allows you to pause and resume the animation by controlling the animation-play-state property.
6. Controlling Animation Direction with the animation-direction property
In addition to delay time and play state, we can also use the animation-direction property to control the animation’s direction, including forward, reverse, and alternating directions. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: colorChange 2s infinite alternate;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Result of running the code:
In this example, we set animation: colorChange 2s infinite alternate; to alternate between forward and reverse directions. The animation-direction property controls the direction of the animation.
7. Use the animation-fill-mode property to set the post-animation style.
In addition to the delay time, playback state, and playback direction, we can also use the animation-fill-mode property to set the style state of an element after the animation ends. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: colorChange 2s infinite;
animation-fill-mode: forwards;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% { background-color: #00f;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Result of running the code:
In this example, we set animation-fill-mode: forwards; to keep the element’s style state at the end of the animation. This allows us to control the element’s style state after the animation ends using the animation-fill-mode property.
8. Use the animation-timing-function property to set the animation timing function
In addition to delay time, playback state, playback direction, and style state, we can also use the animation-timing-function property to set the animation timing function and control the animation speed curve. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: colorChange 2s infinite;
animation-timing-function: ease-in-out;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In this example, we set animation-timing-function: ease-in-out; to make the animation’s speed curve slow at the beginning and end and accelerate in the middle. This allows us to control the animation’s speed curve using the animation-timing-function property.
9. Use the animation-play-state property to control the animation playback state
In addition to delay time, playback state, playback direction, style state, and time function, we can also dynamically control the animation playback state through JavaScript. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: colorChange 2s infinite;
}
@keyframes colorChange {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f; }
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="toggleAnimation()">Toggle Animation</button>
<script>
var isPaused = false;
function toggleAnimation() {
var box = document.querySelector('.box');
if (isPaused) {
box.style.animationPlayState = 'running';
} else {
box.style.animationPlayState = 'paused';
}
isPaused = !isPaused;
}
</script>
</body>
</html>
Code running results:
In this example, we defined a button and used JavaScript to dynamically control the animation-play-state property of a box element to pause and resume the animation.
10. Summary
Through this article, we gained a detailed understanding of CSS animation delay usage and provided code examples. We learned how to use the animation-delay property to set the animation delay, how to animate multiple elements with different delays, how to dynamically set the animation delay using JavaScript, and how to use other properties to control the animation’s play state, direction, style state, and timing function.