CSS变量本身不可过渡，必须将其绑定到可动画的原生属性（如background-color、transform）并为该属性设置transition才生效；错误写法transition: --color-primary 0.3s会被浏览器忽略。
transition 怎么绑定到 CSS 变量上才生效
直接给 --color-primary 这类自定义属性加 transition 没用——CSS 不会监听变量值变化，它只响应实际被应用的属性（比如 background-color、transform）。真正起作用的是：先用变量控制某个**可过渡的原生属性**，再对那个原生属性设 transition。
- ✅ 正确做法：
background-color: var(--color-primary); transition: background-color 0.3s; - ❌ 错误写法：
transition: --color-primary 0.3s;（浏览器直接忽略） - 变量本身不触发重绘，只有它参与计算出的最终样式变更才会触发过渡
- 如果变量用于
clip-path或filter等部分支持动画但兼容性差的属性，过渡可能在 Safari 或旧版 Chrome 失效
修改 :root 变量后动画不触发的常见原因
改了 :root 里的 --size，但元素尺寸没动？大概率是变量没被“活用”——它只是静态代入，没有绑定到会响应变化的渲染属性上。
- 检查是否漏写了
transition目标属性（比如改了--scale，但没给transform设transition: transform 0.2s;） - 确保 JS 修改的是
document.documentElement.style.setProperty('--scale', '1.2');，而不是直接改style属性或 class - 避免在同一个 JS 任务里连续改变量又强制重排（如
offsetHeight），这会打断过渡帧，变成跳变 - 使用
will-change: transform;可提升动画流畅度，但别滥用——仅在明确需要硬件加速时加
多个元素共用同一变量时如何避免过渡冲突
当 10 个按钮都读取 --btn-bg，你改一次变量，它们全得过渡。但如果其中几个要延迟动、几个不动，纯靠变量就失控了。
- 把“是否过渡”拆出来：加一个开关变量，比如
--btn-transition: 0.2s;，然后写transition: background-color var(--btn-transition, 0s); - 不同组件用不同作用域变量，比如
.card { --card-scale: 1; }和.btn { --btn-scale: 1; }，互不干扰 - 慎用
transition: all 0.3s;——它会把所有变化（包括意外的box-shadow、opacity）全动起来，调试困难 - 想让某元素“立刻切换不过渡”，临时加
transition: none !important;，改完立刻移除
JS 动态改变量 + transition 的性能坑
高频修改（比如拖拽中每帧都设 --x）+ 同步读取布局（getBoundingClientRect）= 强制同步重排，卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame批量更新变量，不要在mousemove里直接setProperty - 变量尽量只驱动合成属性（
transform、opacity），避开width、left这类触发布局的属性 - Chrome DevTools 的“Rendering”面板打开“Paint Flashing”，能直观看到哪些区域因变量改动被反复重绘
- 如果变量用于生成
@keyframes内联动画（比如通过 JS 插入带变量的 style 标签），注意 SSR 或构建时无法预编译，可能首屏无动画
