animation-delay用于设置动画开始前的延迟时间，支持秒（s）和毫秒（ms）单位，可正可负；正值延迟启动，负值使动画从中间开始，常用于多个动画按序播放的场景，如元素依次淡入、菜单滑入等；与transition-delay不同，前者用于@keyframes动画，后者用于CSS属性过渡效果。
在CSS中，animation-delay 属性用于定义动画开始执行前的等待时间。也就是说，它控制动画从应用到元素后，延迟多久才真正开始播放。这个属性非常实用，尤其在需要按顺序展示多个动画效果时。
基本语法
animation-delay:
其中 可以是秒（s）或毫秒（ms）。例如：
- animation-delay: 2s; —— 延迟2秒后开始动画
- animation-delay: 500ms; —— 延迟500毫秒（即0.5秒）
常见应用场景
通过设置不同的延迟时间，可以让多个元素的动画依次播放，增强视觉节奏感。
立即学习“前端免费学习笔记（深入）”；
- 轮播提示点逐个闪烁
- 菜单项逐行滑入
- 加载动画中的波浪效果
比如有三个盒子需要依次淡入：
.animated-box {opacity: 0;
animation: fadeIn 1s forwards;
}
.box1 { animation-delay: 0.2s; }
.box2 { animation-delay: 0.4s; }
.box3 { animation-delay: 0.6s; }
@keyframes fadeIn {
to { opacity: 1; }
}
负值的使用
你可能不知道，animation-delay 还支持负值。负延迟意味着动画会立即开始，但会从动画过程的中间某处开始播放。
例如：animation-delay: -1s; 表示动画立即开始，但跳过第一秒的内容，相当于“已经运行了1秒”。
这在循环动画中特别有用，比如让旋转动画一开始就处于旋转状态，而不是从头开始。
与 transition-delay 的区别
animation-delay 是针对 @keyframes 动画的，而 transition-delay 是用在属性过渡上的（如 hover 效果）。两者作用机制不同，不要混淆。
如果你用的是 transition: all 0.3s ease;，那应该用 transition-delay 来控制延迟。
基本上就这些。合理使用 animation-delay 能让你的页面动效更有层次感，不复杂但容易忽略细节。
