animation-delay用于设置动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。默认值为0s，表示动画立即开始；正值如1.5s表示延迟1.5秒后启动；负值如-1s表示立即开始但跳过前1秒内容，常用于让动画从中间状态切入。支持多个延迟时间，用逗号分隔，对应多个动画名称，实现复杂的时间控制。可单独设置或在animation复合属性中简写，合理使用可增强页面动效节奏感。
在CSS中，animation-delay 用于设置动画开始前的延迟时间。也就是说，它定义了从元素加载完成到动画真正开始播放之间等待的时间。
基本语法
animation-delay: 时间值;时间单位可以是秒（s）或毫秒（ms）。常见取值如下：
- 0s：默认值，动画立即开始
- 2s：延迟2秒后开始动画
- 500ms：延迟0.5秒开始
- -1s：负值表示动画立即开始，但会从动画过程的中间开始播放
多个延迟时间可以用逗号分隔，对应多个动画（当设置了多个 animation-name 时）。
使用示例
以下是一个简单的淡入动画，延迟1.5秒后开始：
立即学习“前端免费学习笔记（深入）”；
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 1.5s;
}
也可以简写在 animation 复合属性中：
.element {
animation: fadeIn 1s 1.5s;
}
负延迟的用法
设置负值可以让动画“提前开始”，比如：
.element {animation: slideIn 2s -1s;
}
这表示动画立即开始，但会从第1秒处开始播放（相当于跳过前1秒的内容），常用于让动画更快进入状态。
多动画延迟设置
如果一个元素有多个动画，可以分别为它们设置不同的延迟：
.element {animation: fadeIn 2s ease, moveRight 3s linear;
animation-delay: 0s, 1s;
}
这里第一个动画立即开始，第二个延迟1秒开始。
基本上就这些，合理使用 animation-delay 能让页面动效更有节奏感。
