@keyframes 中禁止使用 CSS 变量，因规范强制忽略此类声明；正确做法是将变量定义在动画元素或祖先上，通过 animation-duration: var(--dur, 0.4s) 绑定，并避免简写、确保单位完整、添加 fallback。
必须在元素上用 animation-duration: var(--dur, 0.4s) 绑定变量，不能写进 @keyframes 里——后者是规范级禁止，写了也白写，整条声明会被静默丢弃。
为什么 @keyframes 里不能用 var(--dur)
浏览器规范明文禁止在 @keyframes 块内解析 CSS 变量。你写 transform: rotate(var(--deg)) 或 animation-timing-function: steps(var(--n))，结果不是报错，而是该行声明直接被忽略。动画会 fallback 到默认行为：比如 ease 替代自定义缓动，0deg 替代旋转角度，视觉上就是卡顿、跳变或完全不动。
这不是兼容性问题，是所有现代浏览器（Chrome/Firefox/Safari/Edge）统一执行的硬限制。
怎么正确绑定变量控制速率
把变量挂载到触发动画的元素本身，或其可继承的祖先节点上，再通过 var() 在 animation-duration 中引用：
立即学习“前端免费学习笔记（深入）”；
- 必须拆开写，别用
animation简写——简写中任意一项值非法（比如缺单位、类型错），整条声明可能失效 - 务必带 fallback：
animation-duration: var(--dur, 0.4s)，否则变量未定义时取0s，动画不播 - 单位要显式写全：
var(--dur, 400ms)和var(--dur, 0.4s)都合法，但混用易引发维护混乱；建议亚秒级统一用ms - JS 修改时机很关键：改完变量后动画不会自动重播，需触发重排（如
offsetHeight）或先暂停再恢复animation-play-state
常见错误现象与调试建议
典型表现包括：动画突然变快/变慢但无响应、修改变量后动画卡死、多个 loader 速率不一致。
- 检查是否误将变量定义在
:root却又在局部覆盖失败——优先把变量设在动画元素自身（.loader { --dur: 300ms; }） - 确认没有媒体查询意外覆盖变量值（比如
@media (prefers-reduced-motion)里重置了--dur） - 用 DevTools 的 Styles 面板实时编辑
--dur值，观察是否立即生效；若无效，大概率是变量没落到目标元素上 - 避免在同一个元素上同时用 JS 设置
style.animationDuration和 CSS 变量，二者冲突时以 inline style 为准
最易被忽略的是变量作用域和 fallback 缺失——变量没传下去，或者忘了写 0.4s 这个兜底值，结果动画直接消失，还以为是逻辑错了。
