CSS变量--anim-duration和--anim-delay可统一控制多元素动画，需定义在:root或父容器，避免@keyframes中直接使用，JS修改后需强制重绘才能生效。
用 --anim-duration 和 --anim-delay 统一控制多个元素动画
CSS 变量不是装饰，是真正能解耦动画参数和具体元素的手段。把时长、延迟抽成变量后，改一处就能同步影响所有用到它的 @keyframes 或 animation 声明。
关键在于：变量必须在能被继承或作用域覆盖的位置定义，比如 :root 或动画父容器上；且要确保变量名不冲突、有明确语义。
-
--anim-duration推荐设为0.3s这类带单位的值，避免在calc()里反复补单位 - 如果某些元素需要“跳过延迟”，别写
--anim-delay: 0，直接用animation-delay: 0s覆盖，否则会受变量默认值干扰 - 变量值被 JS 修改时（如
el.style.setProperty('--anim-duration', '0.6s')），所有依赖它的动画会实时重算，但不会触发重排，只触发布局重绘
在 @keyframes 里直接用 CSS 变量？不行，得绕开
CSS 动画关键帧不支持直接读取自定义属性，@keyframes slide { from { transform: translateX(0); } to { transform: translateX(calc(var(--dist) * 1)); } } 这种写法无效——浏览器会忽略整个 @keyframes 块。
可行方案是：把变量逻辑移到 animation 属性调用侧，或用 JS 注入动态关键帧（不推荐日常项目）。
- 正确做法：用变量控制
animation-duration和animation-delay，关键帧本身保持静态（如固定transform: translateX(100px)） - 若真需动态位移距离，可改用
transform: translateX(var(--dist))配合transition，而非@keyframes - 注意 Safari 15.4+ 才稳定支持在
transition中响应 CSS 变量变化；旧版 Safari 会卡住不动
多个动画联动时，animation-delay 的负值容易误判起始时机
当一组卡片依次入场，常写 animation-delay: calc(var(--anim-delay) * -1) 让后一个提前启动。但负延迟不是“倒播”，而是让动画从中间某一帧开始播放——这会导致视觉跳跃。
更稳的做法是用正向延迟 + 时间偏移设计，让每个元素的 animation-duration 不变，仅靠 delay 错开起点。
- 例如三个元素，设
--anim-delay: 0.1s，则分别设animation-delay: 0s、0.1s、0.2s，比用-0.1s更可控 - 如果用
animation-iteration-count: infinite，负延迟会让动画从第 N 次循环中间切入，行为难预测 - 调试时可在 DevTools 里临时禁用某个元素的
animation-delay，观察是否真由延迟引起错位
JS 修改 CSS 变量后动画没反应？检查是否触发了重绘
修改 --anim-duration 后动画没变快，大概率是因为浏览器没把它当作样式变更来处理——尤其当变量只用于 animation 属性，而该属性本身没被显式重设。
最简验证方式：在 JS 中顺手改一下 opacity 或 transform，强制触发重绘，看动画是否立刻响应变量变化。
- 稳妥写法：
el.style.setProperty('--anim-duration', '0.4s'); el.style.animation = 'none'; setTimeout(() => { el.style.animation = ''; }, 0); - 不要依赖
getComputedStyle(el).getPropertyValue('--anim-duration')判断变量是否生效，它返回的是字符串，不含单位解析逻辑 - 服务端渲染（SSR）页面中，首次 JS 注入变量后，需确保 DOM 已挂载完毕再修改，否则变量虽设了，但无元素监听
变量本身不触发动画，真正驱动变化的是 animation 属性对变量的引用是否被浏览器识别为有效更新。这个边界很薄，稍不注意就卡在“看起来改了，其实没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
