纯 css 的 animation-delay 无法真正“等页面加载完再延迟”，也不能直接支持“多次不同延迟触发”——这两个需求必须靠 js 配合才能可靠实现。
纯 CSS 的 animation-delay 无法真正“等页面加载完再延迟”，也不能直接支持“多次不同延迟触发”——这两个需求必须靠 JS 配合才能可靠实现。
animation-delay 的触发时机不是 onload
很多人给 body 加 animation-delay: 2s，以为页面一加载完就等 2 秒再动，结果动画在 DOM 插入、样式计算完成的瞬间就开始倒计时，哪怕图片、字体、第三方脚本还在加载。这是因为：animation-delay 的计时起点是该元素的样式被计算完成（layout 前），不是 DOMContentLoaded，更不是 window.onload。
常见错误现象：
- 首屏文字还没渲染完，动画已播完
- 背景图未加载，元素先闪一下再动
- 用
display: none隐藏的元素，加了animation-delay但完全不触发
可行做法：
- 初始状态用
animation-play-state: paused暂停动画 - 监听
window.addEventListener('load', ...)或document.addEventListener('DOMContentLoaded', ...)（按需选） - 触发后改回
animation-play-state: running，此时animation-delay才真正开始计时
多次不同延迟触发得靠 JS 控制 class 或 CSS 变量
比如按钮点三次，分别延迟 0.5s、1.2s、2s 启动同一动画，硬写三个 class（delay-05、delay-12、delay-20）维护成本高，且无法动态响应。
推荐方式：
- 用 CSS 自定义属性控制延迟：
element.style.setProperty('--delay', '1.2s') - CSS 中写：
animation-delay: var(--delay, 0s) - 每次触发前重设变量值，再切换一次 class 或强制重绘（如
element.offsetHeight）以刷新动画
注意点：
- 仅靠修改 CSS 变量不会自动重启动画，必须配合 class 切换或触发重排
- 若用
animation-play-state控制，记得每次先paused再running，否则可能跳过 delay
多个动画同时存在时，delay 必须一一对应
一个元素应用多个 @keyframes 动画（比如缩放 + 位移 + 透明度），animation-delay 必须用逗号分隔，和 animation-name 顺序严格一致。
例如：
animation-name: fade-in, slide-up, pulse;<br>animation-duration: 0.3s, 0.6s, 1.2s;<br>animation-delay: 0.2s, 0.4s, 0.8s;
如果漏写某个 delay，它会默认为 0s，导致部分动画提前启动；如果多写一个 delay，多余项会被忽略。
容易踩的坑：
- 复制粘贴时没对齐逗号数量，造成延迟错位
- 用 SCSS 变量生成动画列表，但没同步生成 delay 列表
- JS 动态设置
style.animationDelay时传入字符串"0.5s, 0.8s"，但没确认浏览器是否支持多值写法（部分旧版 Safari 不稳定）
负 delay 不是“提前播放”，而是“从中间帧切入”
animation-delay: -0.5s 不会让动画早于样式生效时间启动，它只是让动画从第 -0.5 秒的画面开始渲染——前提是动画总时长 ≥ 0.5s，且设置了 animation-fill-mode: backwards，否则起始帧可能空白或闪动。
典型用途：
- 无缝滚动轮播：上一帧结束位置 = 下一帧起始位置，用负 delay 对齐
- 加载中图标旋转，希望第一帧就看到转到 90° 的状态，而非从 0° 开始
- 避免首次渲染时的“突兀入场”，用负 delay 让动画看起来已在进行中
关键限制：
- 负 delay 不会缩短整个动画周期，只改变起始相位
- 若动画时长小于负 delay 绝对值（如
animation-duration: 0.3s; animation-delay: -0.5s），行为不可预测，多数浏览器会 fallback 到首帧
真正麻烦的地方不在语法，而在于 timing 的“可见性”——你没法用 devtools 精确看出 delay 是从哪一刻开始计的，得靠 performance.now() 打点验证；另外，animation-play-state 在 iOS Safari 上有兼容性波动，切记加前缀或降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
