不能只用一个--duration变量，因为交互节奏不同需分档时长：--transition-fast(0.18s)用于按钮悬停等微交互，--transition-normal(0.3s)用于常规状态切换，--transition-slow(0.45s)用于模态框等重量级变化；css变量不可动画，必须在元素上显式声明transition并严格对齐属性、时长与缓动函数。
不能只用一个 --duration 变量统一所有动画，必须按交互语义分档定义、显式绑定到具体属性，否则按钮悬停会拖沓、模态框入场会突兀。
为什么单个 --duration 变量会破坏交互节奏
把 --duration: 0.3s 硬套在按钮 hover 和全屏遮罩上，实际效果是：按钮反馈慢半拍（该用 --transition-fast），遮罩却一闪而过（该用 --transition-slow）。更关键的是，CSS 变量本身不触发动画——真正起作用的是它被写进 transition 或 animation-duration 的那一刻，变量只是占位符。
- 高频微交互（按钮、开关、图标）需
--transition-fast: 0.18s - 常规状态切换（折叠面板、导航展开）用
--transition-normal: 0.3s - 重量级变化（模态框、路由跳转）配
--transition-slow: 0.45s - 别用
calc(var(--base) * 1.5)动态算时长——CSS 变量不支持运行时运算，且语义模糊
transition 声明必须严格对齐属性、时长与缓动函数
常见错误是只改了变量值，却没更新对应元素的 transition 规则。浏览器只对最终解析出的原生属性做插值，变量不会自动“注入”到已有声明中。
- 每个逗号分隔项必须完整：例如
transition: background-color var(--transition-fast) ease, transform var(--transition-fast) ease - 顺序错一位（比如把
transform的时长写在opacity的缓动位置）会导致整条声明失效 - 避免用
all—— 会把box-shadow或border-color的微小变化也纳入过渡，引发不必要的重绘 - 模态框推荐用
cubic-bezier(0.25, 0.46, 0.45, 0.94)这类带缓冲的缓动，而非默认ease
animation-duration 支持变量，但 @keyframes 内不能直接用 var()
你可以在元素上写 animation-duration: var(--anim-duration)，但千万别在 @keyframes 块里写 transform: translateX(var(--dist)) —— 浏览器会静默忽略整行，动画直接失效。
- 想让关键帧数值响应变量？唯一合法方式是用
calc(var(--dist))包裹，并确保该属性支持计算（如transform、top） -
animation-name不支持变量动态切换，禁用动画应改用animation-name: var(--anim-name, slide-in)+ 一个空@keyframes noop - Safari 15.4 之前不支持
cubic-bezier(var(--x1), ...)这种函数内嵌变量写法，务必实测目标环境 - JS 修改变量后动画没反应？检查是否触发了重绘——可临时加
el.style.transform = 'translateZ(0)'强制刷新
复杂联动动画必须用 map 或多档变量成组管理
当一组卡片依次入场，如果只改 --anim-duration 却漏调 --anim-delay，关键帧节奏和延迟就错位，视觉上会卡顿或跳跃。
- 用 Sass map 或 CSS 自定义属性组（如
--anim-fade-duration/--anim-fade-delay）保证参数成对出现 - 分离写
animation-duration和animation-delay，比复合animation: fade 0.3s ease 0.1s更可控——后者漏写任一参数都会回退到默认值 - 负延迟（
animation-delay: -0.1s）不是倒播，而是从中间帧切入，容易导致视觉跳跃；优先用正向递增延迟（0s、0.1s、0.2s） - SVG 路径动画依赖
stroke-dashoffset，必须配合transition: --offset，且--offset值要带单位（如calc(var(--offset) * 1px)）
最易被忽略的点：变量定义位置决定作用域——:root 下的变量全局可用，但局部覆盖（如 .modal { --transition-slow: 0.6s; }）必须写在触发动画的元素上，子元素才能继承；否则变量存在，但根本没被读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
