animation-duration 支持 var()，但 @keyframes 内部不支持变量；必须在元素上用 animation-duration: var(--dur, 0.4s) 等显式子属性声明，禁用简写，且变量需定义在 :root 或父容器并提供合法 fallback。
animation-duration 支持 var()，但 @keyframes 内部不支持
直接在元素上写 animation-duration: var(--dur, 0.4s) 是唯一可靠方式；在 @keyframes 块里写 transform: translateX(var(--dist)) 或 animation-timing-function: steps(var(--step)) 会被浏览器静默忽略整行，动画退回到默认行为，甚至完全不注册。
常见错误现象：关键帧写了变量却没动画、节奏突变、缓动失效——大概率是误把变量塞进了 @keyframes 作用域。
-
@keyframes是纯 CSS 上下文，不解析运行时变量，也不支持计算 - 变量必须定义在
:root或父容器上，确保目标元素能通过级联或继承访问 - 务必提供 fallback：
var(--dur, 0.4s)，否则未声明时取0s，动画不播
必须拆开写 animation，禁用简写
用 animation 简写属性绑定变量极易出错：只要缺一个值（比如漏了 animation-timing-function），或类型错（如把字符串当时间），整条声明就会失效。
正确做法是显式声明各子属性，只对支持变量的项用 var()：
立即学习“前端免费学习笔记（深入）”；
button {
animation-name: fadeIn;
animation-duration: var(--anim-duration, 0.25s);
animation-timing-function: ease-out;
animation-delay: var(--anim-delay, 0s);
animation-iteration-count: 1;
}-
animation-name和animation-timing-function不支持变量动态切换（animation-name: var(--name)无效） - 若需切换动画类型，改用 class 切换 + 预设规则，而非试图用变量驱动
animation-name - 移动端注意：Safari 15.4 之前不支持
cubic-bezier(var(--x1), ...)这类函数内嵌变量写法
变量命名要按交互语义分档，别抽象成基础值
用一个 --duration 统一时长看似省事，实则让按钮悬停“发飘”、模态框入场“卡顿”。不同交互节奏本就不该一样。
推荐在 :root 中预设三档语义化变量：
:root {
--transition-fast: 0.18s; /* 按钮 hover、开关 toggle */
--transition-normal: 0.3s; /* 折叠面板、导航展开 */
--transition-slow: 0.45s; /* 模态框、路由切换 */
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}- 别用
calc(var(--base) * 1.2)动态算时长——CSS 变量不支持运行时运算 - 变量名要让人一眼看懂用途，而不是“基础时长”“倍数”这类抽象词
- JS 修改时，优先改
document.documentElement.style.setProperty()，避免污染局部样式
JS 动态修改需注意时机与性能
用 JS 改 --anim-duration 能实现运行时变速，但不是所有时机都安全：在重排/重绘密集阶段频繁 setProperty 会卡顿。
- 批量修改多个变量时，用
style.cssText += '--a: x; --b: y;'比多次setProperty更高效 - 响应用户拖拽等高频操作，用
requestAnimationFrame节流，避免每帧都触发重绘 - 变量未定义时 fallback 必须合法（如
0.4s），否则可能触发意外回退到0s或继承链断裂
最易被忽略的是：改了变量值，却不更新对应元素的 animation-duration 声明本身——变量只是占位符，浏览器只认最终解析出的原生属性值。
