CSS动画延迟：第一个出现了再出现第二个|极客教程

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:

CSS动画延迟：第一个出现了再出现第二个

在上面的示例中，我们定义了两个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:

CSS动画延迟：第一个出现了再出现第二个

在上面的示例中，我们使用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:

CSS动画延迟：第一个出现了再出现第二个

在上面的示例中，我们定义了三个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>