css变量animation-delay: var(--delay)常因被重置、覆盖或未声明而失效；推荐用内联style="--delay: 0.3s"配合var(--delay, 0s)实现元素级独立延迟。
为什么直接写 animation-delay: var(--delay) 常常不生效
因为 CSS 变量必须被“实际使用”且未被覆盖，才能参与计算。常见失效场景包括：
— 父级或同级样式中写了 animation: none 或重置了整个 animation 简写属性，导致 animation-delay 被一并清空
— 元素上存在内联 style="animation-delay: 0s"，它会覆盖 CSS 中的 var(--delay)
— 自定义变量未在 :root 或元素自身作用域中声明，var(--delay) 解析为无效值，浏览器 fallback 到默认的 0s
用 style="--delay: 0.3s" 实现每个元素独立延迟
这是最轻量、无需 JS 遍历的 inline 控制方式，适合服务端渲染或静态列表。关键点：
— 在 HTML 标签上直接写 style="--delay: 0.3s"，变量作用域自动限定到该元素
— CSS 中统一写 animation-delay: var(--delay, 0s)，0s 是兜底值，防未定义
— 不需要额外 class，也不依赖 nth-child 序号，天然支持动态项数和乱序 DOM
.item {
animation: fadeInUp 0.4s ease-out forwards;
animation-delay: var(--delay, 0s);
}
对应 HTML：<div class="item" style="--delay: 0s">第一项</div><div class="item" style="--delay: 0.2s">第二项</div><div class="item" style="--delay: 0.5s">第三项</div>
JS 动态设置 --delay 时必须触发重排
单纯执行 el.style.setProperty('--delay', '1.2s') 不保证动画立即响应——浏览器可能把这次变更和后续样式修改合并，跳过重绘。可靠做法是：
— 改完变量后，立刻读取一个强制触发 layout 的属性，比如 el.offsetHeight 或 getComputedStyle(el).transform
— 不要用 setTimeout 模拟等待，它无法对齐动画时钟，容易错帧
— 如果延迟值来自用户交互（如拖拽滑块），建议加 throttle，避免高频 setProperty 压垮主线程
多个动画共存时，animation-delay 必须一一对应
当一个元素同时跑两个动画（比如位移 + 透明度），不能只写一个 animation-delay: 0.3s。否则第二个动画会回退到 0s 延迟。正确写法：
— 用逗号分隔： animation: slide 0.6s, fade 0.4s; animation-delay: 0.2s, 0.5s;
— 或拆成多行： animation-name: slide, fade; animation-duration: 0.6s, 0.4s; animation-delay: 0.2s, 0.5s;
— 若用变量控制，需为每个动画单独设变量，例如 animation-delay: var(--slide-delay), var(--fade-delay);，并在 inline style 中分别传入
paused 做进度控制，又要求动画时长严格已知——这些边界情况，往往比“怎么写变量”更消耗调试时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
