对子div的CSS动画延迟

基础概念

CSS动画延迟（Animation Delay）是指动画开始执行前的等待时间。通过设置animation-delay属性，可以控制动画在何时开始执行。这对于创建复杂的动画序列或实现特定的视觉效果非常有用。

类型

CSS动画延迟可以通过以下几种方式实现：

内联样式：直接在HTML元素的style属性中设置animation-delay。
内部样式表：在HTML文件的<head>部分使用<style>标签设置。
外部样式表：在单独的CSS文件中设置。

应用场景

页面加载动画：在页面加载时，通过延迟动画可以逐步显示内容，提升用户体验。
交互效果：在用户与页面元素交互时，通过延迟动画可以创建更自然的反馈效果。
导航菜单：在导航菜单展开或收起时，通过延迟动画可以创建平滑的过渡效果。

示例代码

假设有两个子div，我们希望它们在页面加载后分别延迟1秒和2秒开始动画：

<!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 Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: move 2s linear infinite;
        }

        .box1 {
            animation-delay: 1s;
        }

        .box2 {
            animation-delay: 2s;
        }

        @keyframes move {
            0% { transform: translateX(0); }
            50% { transform: translateX(200px); }
            100% { transform: translateX(0); }
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>