animation-delay用于设置动画开始前的延迟时间，支持秒（s）和毫秒（ms）单位，可为正或负值；正数表示等待指定时间后开始，负数则立即开始但跳过相应时长，0s为默认值即立即启动。该属性常用于控制多个动画的播放顺序或与用户交互配合，例如实现页面元素依次出现、悬停效果延时触发等场景。通过简写animation属性可同时定义动画名称、持续时间、延迟时间等，如animation: slideIn 1s ease-in-out 0.3s infinite；当设置多组动画时，可分别为每个动画指定不同的延迟，如.fadeIn立即开始，moveRight延迟0.5s，grow延迟1s，从而营造有节奏的视觉效果。推荐使用秒作单位以提升代码可读性。
在CSS中，animation-delay 属性用于定义动画开始执行前的等待时间。也就是说，它控制动画从应用到元素后，延迟多久才开始播放。这个属性非常实用，特别是在需要精确控制多个动画按顺序播放或与用户交互配合时。
基本语法
animation-delay 的值可以是秒（s）或毫秒（ms），支持正数和负数：- 正数值：表示动画将在指定时间后开始。例如，2s 表示延迟2秒后启动动画。
- 负数值：表示动画立即开始，但会从动画序列的中间某点开始播放。例如，-1s 表示动画立刻开始，但相当于已经运行了1秒。
- 0s（默认值）：动画在应用后立即开始。
示例：
.element {
animation-name: slideIn;
animation-duration: 1s;
animation-delay: 0.5s; /* 半秒后开始 */
}
与 animation 合写形式
通常我们会使用简写的 animation 属性来同时设置多个动画参数，其中 delay 是第三个可选值：
.element {
animation: slideIn 1s ease-in-out 0.3s infinite;
/* 持续时间 | 过渡效果 | 延迟 | 循环次数 */
}
在这个例子中，动画会在元素加载后等待 0.3 秒再开始，并无限循环播放。多组动画的延迟设置
当一个元素有多个动画时，可以为每个动画分别设置延迟：
.box {
animation: fadeIn 2s, moveRight 1.5s linear 0.5s, grow 1s ease-in 1s;
}
这里三个动画：- fadeIn：立即开始，持续2秒。
- moveRight：延迟0.5秒后开始。
- grow：延迟1秒后开始。
实际应用场景
animation-delay 常用于以下情况：- 页面加载动画顺序出现：比如标题先出现，然后按钮，再是图片，通过不同延迟营造节奏感。
- 悬停效果延时触发：避免鼠标轻微划过就触发动画，提升用户体验。
- 轮播或指示器动画同步：让多个元素依次高亮或移动。
基本上就这些。合理使用 animation-delay 能让界面动效更自然、更有层次。注意单位别写错，一般推荐用秒（s）更清晰，比如 0.7s 比 700ms 更易读。
