只需设置 animation-delay 属性即可实现 CSS 动画延迟播放，但必须配合 animation-name 和 animation-duration 才能生效；它仅作用于首次触发，且计时从动画应用到元素那一刻开始。
如果只想让 CSS 动画延迟开始播放，不用循环、不改变持续时间，核心就是用 animation-delay 属性——它专门控制动画在触发后等待多久才真正启动。
只设 delay，其他属性保持默认或显式声明
仅写 animation-delay 是无效的，因为 CSS 动画必须搭配 animation-name 和 animation-duration 才能生效。你可以：
- 用简写
animation一次性设置，比如：animation: slide-in 0.5s 1s;（0.5s 持续，1s 延迟） - 或分开写，确保关键项不被遗漏：
animation-name: slide-in;
animation-duration: 0.5s;
animation-delay: 1s;
延迟只作用于首次播放，不影响后续行为
animation-delay 仅决定动画第一次触发后的等待时间。如果你没设 animation-iteration-count，默认只播一次；设了 infinite，那每次循环**不会重新计算 delay**——第二轮会紧接第一轮结束立刻开始。
想实现“每轮都延迟”，得靠 JS 控制重播，或用 @keyframes 内部用百分比空出暂停段（不推荐，语义不清）。
立即学习“前端免费学习笔记（深入）”；
注意触发时机：delay 不等于“加载完再播”
animation-delay 是从动画**被应用到元素那一刻起计时**。如果元素初始是 display: none 或未插入 DOM，delay 不会提前累积。常见误操作：
- 给尚未显示的元素加动画 → 实际 delay 从
display: block或添加 class 那一刻才开始 - 用
opacity: 0隐藏但元素已渲染 → delay 正常生效
配合 animation-play-state 实现手动控制
如果需要“准备好了再启动延时动画”，可以先暂停动画：animation-play-state: paused;
等条件满足（如用户点击、数据加载完成），再用 JS 切换为 running，此时 animation-delay 才开始倒计时。
示例：
div { animation: fade 1s 2s paused; }
div.active { animation-play-state: running; }JS 中执行
el.classList.add('active') 后，动画将延迟 2 秒后播放。 
