不能只定义一个 --duration 变量，因为不同交互需不同节奏：按钮悬停需快速反馈（--transition-fast: 0.18s），常规切换用平衡时长（--transition-normal: 0.3s），重量级变化需视觉缓冲（--transition-slow: 0.45s）。
直接用一个 --duration 变量统一全站过渡时长，看似省事，实则会让按钮悬停“飘忽”、模态框入场“卡顿”，根本原因是交互节奏本就不该一样。
为什么不能只定义一个 --duration 变量
CSS 变量本身不触发动画，它只是个占位符；真正起作用的是被 transition 规则引用的那一刻。单一变量掩盖了实际需求差异：
- 按钮 hover 需要快速反馈，
--transition-fast: 0.18s更合适 - 导航展开或表单 focus 属常规切换，
--transition-normal: 0.3s是平衡点 - 模态框、页面路由这类重量级变化，
--transition-slow: 0.45s才能提供视觉缓冲 - 用
calc(var(--duration) * 1.2)动态算时长？CSS 变量不支持运行时运算，且语义模糊，无效
必须在 :root 中按语义预设多档变量
别抽象成“基础时长”，而要按交互意图命名，确保团队一眼看懂用途：
:root {
--transition-fast: 0.18s;
--transition-normal: 0.3s;
--transition-slow: 0.45s;
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}
-
--transition-fast用于高频微交互：按钮:hover、图标缩放、开关 toggle -
--transition-normal用于常规状态切换：折叠面板、导航展开、输入框:focus -
--transition-slow用于重量级变化：模态框显隐、加载遮罩、路由切换 -
--easing-standard统一缓动函数，避免ease、ease-in-out混用导致节奏割裂
transition 声明必须显式绑定属性和变量
变量不会自动生效——你得把它写进完整的 transition 规则里，且逗号分隔的每一对都必须严格对齐：
button {
transition: background-color var(--transition-fast) var(--easing-standard),
transform var(--transition-fast) var(--easing-standard);
}
<p>.modal {
transition: opacity var(--transition-slow) var(--easing-standard),
transform var(--transition-slow) var(--easing-standard);
}</p>
- 顺序错一位（比如把
transform的时长写在opacity的缓动位置），整条声明失效 - 禁用
transition: all—— 它会无意触发动画的box-shadow或border-color，引发重绘 - 不要只改变量值却不更新对应元素的
transition规则，变量只是占位符，浏览器只认最终解析出的原生属性
JS 动态修改时必须走 document.documentElement
想用 JS 切换动画节奏？别在 body 上调 style.setProperty，它对 :root 声明的变量无效：
- ✅ 正确写法：
document.documentElement.style.setProperty('--transition-slow', '600ms') - ❌ 错误写法：
document.body.style.setProperty('--transition-slow', '600ms')→ 静默失败 - 漏单位（如写
'600'而非'600ms'）或漏--前缀，同样无效 - 改完变量后，若需重置动画起点（比如呼吸环第二次启动），必须先设
0ms，再执行void element.offsetWidth强制重排，否则浏览器仍缓存旧状态
最容易被忽略的是：变量名再规范，如果没在具体元素上写出对应的 transition 规则，它就只是个静静躺在 :root 里的字符串——浏览器根本不认识它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
