极客教程CSS动画延迟：第一个出现了再出现第二个
在网页设计中，CSS动画是一种非常常见的技术，可以为网页增添生动的效果。而动画延迟则是一种控制动画开始时间的方法，可以让元素在一定时间后再开始动画。在本文中，我们将介绍如何使用CSS动画延迟来实现第一个元素出现后再出现第二个元素的效果。
1. 使用animation-delay属性
animation-delay属性可以设置动画的延迟时间，让动画在指定的时间后开始执行。下面是一个简单的示例代码：
<!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: fadeIn 1s forwards;
}
.box2 {
width: 100px;
height: 100px;
background-color: #00f;
animation: fadeIn 1s forwards;
animation-delay: 1s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
Output:
在上面的示例中，我们定义了两个div元素，分别为box和box2，它们都应用了名为fadeIn的动画，但是box2元素设置了animation-delay: 1s;，所以它会在box元素动画结束后延迟1秒再开始动画。
2. 使用JavaScript控制动画延迟
除了使用CSS属性外，我们还可以使用JavaScript来控制动画的延迟效果。下面是一个示例代码：
<!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 with JavaScript</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: fadeIn 1s forwards;
}
.box2 {
width: 100px;
height: 100px;
background-color: #00f;
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<script>
const box2 = document.querySelector('.box2');
box2.style.animationDelay = '1s';
</script>
</body>
</html>
Output:
在上面的示例中，我们使用JavaScript获取了box2元素，并通过style.animationDelay属性设置了动画延迟时间为1秒，实现了第一个元素出现后再出现第二个元素的效果。
3. 使用多个延迟时间
有时候我们可能需要为不同的元素设置不同的延迟时间，这时可以使用多个animation-delay属性。下面是一个示例代码：
<!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 with Multiple Delays</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: fadeIn 1s forwards;
}
.box2 {
width: 100px;
height: 100px;
background-color: #00f;
animation: fadeIn 1s forwards;
animation-delay: 1s;
}
.box3 {
width: 100px;
height: 100px;
background-color: #0f0;
animation: fadeIn 1s forwards;
animation-delay: 2s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
Output:
在上面的示例中，我们定义了三个div元素，分别为box、box2和box3，它们都应用了名为fadeIn的动画，但是box2和box3元素分别设置了不同的animation-delay属性，实现了多个元素按照不同的延迟时间出现的效果。
4. 使用关键帧动画控制延迟
除了使用animation-delay属性外，我们还可以通过关键帧动画来控制动画的延迟效果。下面是一个示例代码：
<!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 with Keyframes</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: fadeIn 1s forwards;
}
.box2 {
width: 100px;
height: 100px;
background-color: #00f;
animation: fadeIn2 1s forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn2 {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
Output:
在上面的示例中，我们定义了两个div元素，分别为box和box2，它们分别应用了名为fadeIn和fadeIn2的关键帧动画，通过设置关键帧动画的百分比来控制元素的出现时间，实现了第一个元素出现后再出现第二个元素的效果。
通过以上示例代码，我们可以看到如何使用CSS动画延迟来实现第一个元素出现后再出现第二个元素的效果。无论是使用animation-delay属性、JavaScript控制、多个延迟时间还是关键帧动画，都可以轻松实现这一效果。