animation-duration 必须绑定在元素上而非 @keyframes 中；css 变量不可在 @keyframes 内使用，否则整条声明被静默忽略；应拆分 animation 属性单独设置，并为 var() 提供带单位的 fallback（如 var(--dur, 400ms)）；js 修改变量后需手动重播动画才能生效。
animation-duration 必须绑定在元素上，不能写在 @keyframes 里
浏览器规范明确禁止在 @keyframes 块内解析 CSS 变量，哪怕只是 transform: translateX(var(--offset)) 这种写法，整条声明也会被静默忽略——动画不会报错，但会退回到默认行为（比如 ease 或直接卡住）。这不是兼容性问题，是规范层的硬限制。
正确路径只有一条：把变量定义在触发动画的元素（或其祖先）上，再用 var() 绑定到该元素的 animation-duration 属性。
必须拆开写 animation-duration，别用 animation 简写
简写属性 animation 对缺失值极其敏感。一旦你写成 animation: spin var(--dur, 0.4s) linear infinite;，而 --dur 没定义或类型不匹配（比如传了字符串 "0.4" 却没带单位），整条声明可能失效，动画直接不播。
更稳妥的做法是单独声明时长：
animation-name: spin;animation-duration: var(--dur, 0.4s);animation-timing-function: linear;animation-iteration-count: infinite;
这样即使某一项出错，其余仍可生效。
fallback 和单位必须显式写全
没 fallback 的 animation-duration: var(--dur) 很危险——变量未声明时取值为 invalid，浏览器按规范会回退到默认 0s，结果就是动画瞬间完成、不可见。
单位也不能省或混用：
- ✅
var(--dur, 400ms)或var(--dur, 0.4s)都合法 - ⚠️ 但若 JS 动态设值时一半用
500ms、一半用0.5s，维护和调试成本陡增 - 建议统一用毫秒（
ms）处理亚秒级动画，避免小数点精度争议
JS 修改变量后，动画不会自动重触发
改了 --dur 只是更新了计算值，但当前正在播放的动画不会中断重算。想让新时长立即生效，得手动重播：
- 临时移除 class 再加回来
- 或用
element.style.animation = 'none';触发回流，再恢复原值 - 更轻量的做法：给
animation加个随机 keyframe 名（如spin-v2），强制浏览器识别为新动画
这个细节常被忽略——你以为变量一改就调速，其实动画还在按旧节奏跑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
