transition 不能直接动画 calc() 表达式，因其不可插值；应优先用 transform 配合 css 变量实现平滑过渡，或通过 @property 显式声明变量类型以支持 transition，兼容性不足时需降级为 javascript 动画。
transition 不能直接动画 calc() 表达式
CSS 的 transition 只能对「可插值」的属性做平滑过渡，比如 width、opacity、transform。但 calc(100px + var(--offset)) 本身不是值，是计算逻辑——浏览器在应用时才求值，且不参与过渡插值过程。所以你写 transition: width 0.3s; + width: calc(50px + var(--x));，改 --x 时宽度会跳变，不是动画。
用 transform 替代 layout 属性更可靠
想让基于变量的位移/缩放动起来，优先走 transform。它支持硬件加速，且 transform: translateX(calc(var(--dx) * 1px)) 虽然 calc 不参与插值，但现代浏览器（Chrome 110+、Firefox 100+、Safari 16.4+）会对 transform 中的 CSS 变量变更做隐式插值——前提是该变量只被用于 transform，且没混用其他非插值属性。
- ✅ 推荐写法：
transform: translateX(calc(var(--tx) * 1px));+transition: transform 0.3s; - ❌ 避免混用：
width: calc(var(--w) * 10px); height: calc(var(--h) * 10px);—— 改变量时两个 layout 属性都跳变 - ⚠️ 注意单位：
calc()里必须显式带单位（如1px），不能写calc(var(--n))（--n是纯数字），否则解析失败，transform退化为 none
需要 layout 动画？用 JavaScript 补位
如果真要过渡 width、margin 这类影响布局的属性，又依赖变量计算，CSS 自身无解。此时得靠 JS 主动触发重排前的“预设值”：
- 监听变量变化（
new MutationObserver或自定义事件） - 读取当前
getComputedStyle(el).width，再计算目标值（如calc(200px + getVar('--gap') + 'px')） - 用
el.animate()或requestAnimationFrame手动驱动数值变化，同步更新内联 style - 避免高频触发：变量批量更新时合并成一次动画，否则 layout thrashing 很明显
CSS 自定义属性动画的兼容性陷阱
不是所有浏览器都支持变量在 transform 中的动画。Safari 15.4–16.3 对 calc(var(--x)) 在 transform 里的变更不做插值；旧版 Chrome 会 fallback 到逐帧重绘（卡顿）。验证方法很简单：
立即学习“前端免费学习笔记（深入）”；
打开 DevTools → 修改一个 --tx 值 → 看元素是否平滑移动，还是突兀跳到新位置。若跳变，说明当前环境不支持，得降级到 JS 方案或改用 @property 显式注册。
@property 是目前唯一能让 CSS 变量具备类型和插值能力的方式，但需声明：
@property --tx {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}然后 transition: --tx 0.3s; 才真正生效——不过 IE 和 Safari 16.3 以下完全不支持 @property，上线前务必检查目标用户环境。
变量动画看着轻巧，实际卡点全在浏览器实现差异上。别信 demo 里的“丝滑”，先在真实机型上点几次变量开关看效果。
