必须分档定义动画时长变量并显式绑定到具体属性——按钮悬停用--transition-fast:0.18s，常规切换用--transition-normal:0.3s，模态框等重量级变化用--transition-slow:0.45s；禁用animation:all，避免不必要重绘；变量名需具交互语义如--transition-slow而非抽象的--duration-2。
不能靠一个 --duration 变量统管所有动画时长——按钮悬停要快，模态框入场要缓，硬套同一值会让交互节奏崩掉。
为什么改了 --duration 值动画却不生效
CSS 变量本身不触发动画，它只是个占位符。浏览器只对最终解析出的原生属性（比如 animation-duration: 0.3s）做插值计算。只改 :root 里的变量值，但没在元素上重新声明 animation-duration: var(--duration)，浏览器根本不会重算动画逻辑。
- 常见错误：JS 执行了
document.documentElement.style.setProperty('--duration', '0.6s')，但对应元素没写animation-duration: var(--duration) - Safari 15.4 之前不支持
cubic-bezier(var(--x1), ...)这类函数内嵌变量，会静默失效 - 变量修改后，若元素已处于动画中，新值会在下一次触发时生效（比如 hover 再进入），不是实时“热替换”
animation-duration 支持变量，但 @keyframes 里不能直接用 var()
你可以在元素上写 animation-duration: var(--anim-duration)，但千万别在 @keyframes 块里写 transform: translateX(var(--dist))——浏览器会忽略整行，动画直接白屏。
- 合法做法：用
calc(var(--dist))包裹，且确保该属性支持计算（transform、top、left等可以；color不行） - 禁用动画不要设
animation-name: none，而是用animation-name: var(--anim-name, slide-in)+ 一个空的@keyframes noop {} - 想让多个元素按顺序入场？别依赖负
animation-delay，它会让动画从中间帧切入，造成视觉跳跃；改用正向递增延迟更稳
必须分档定义变量，且显式绑定到具体属性
高频微交互（按钮、图标缩放）用 --transition-fast: 0.18s，常规切换（导航展开、折叠面板）用 --transition-normal: 0.3s，重量级变化（模态框、路由跳转）配 --transition-slow: 0.45s。别用 calc(var(--base) * 1.5) 动态算——CSS 变量不支持运行时运算，语义也模糊。
-
transition声明必须严格对齐：每个逗号分隔项都得是完整三元组——property duration timing-function - 顺序错一位（比如把
transform的时长写在opacity的缓动位置），整条transition声明直接失效 - 禁用
transition: all：它会把box-shadow或border-color的微小变化也纳入过渡，引发不必要重绘
最易被忽略的一点：变量名要有明确交互语义，而不是抽象成“基础时长”。团队协作时，--transition-slow 比 --duration-2 更容易理解用途，也更难误用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
