css变量不能直接参与动画，transition和@keyframes均不支持var()，必须通过calc(var(--x))驱动transform或opacity才能实现高性能动画。
CSS变量本身不直接参与动画补间，用错方式就等于没动画——它只是“值容器”，不是“可动画属性”。
为什么transition: --x 0.3s完全无效
浏览器根本不识别--x这类自定义属性为可过渡目标。即使你写了这行 CSS，devtools 里也看不到 transition 生效，控制台不报错，但就是不动。
- transition 只响应标准属性名（如
color、transform、opacity），不解析变量语义 - 改
element.style.setProperty('--x', '100px')不会自动触发transform重算，更不会启动补间 - 想靠
var(--x)驱动transform并过渡？必须先让transform值真正变化，且该变化得被浏览器“看见”
@keyframes里不能直接写var(--x)
这是规范级限制，不是兼容性问题。浏览器在解析@keyframes块时直接跳过所有var()调用，整行样式静默失效。
- 错误写法：
100% { transform: translateX(var(--dist)); }→ 等同于没写 - 正确路径只有一条：
100% { transform: translateX(calc(var(--dist))); }，calc()是唯一合法入口 - 变量必须定义在动画元素自身或祖先上（如
.item { --dist: 200px; }），不能只定义在:root却指望@keyframes读取
高性能动画的硬门槛：变量只能驱动transform和opacity
用--width控制width，或--bg控制background-color，哪怕加了transition，照样触发 Layout → Paint → Composite 全流程，卡顿立现。
- 真正省资源的组合只有：
setProperty('--x', '100px')→transform: translateX(calc(var(--x)))→ 配合will-change: transform - 单位必须完整：
'100'不行，'100px'才行；calc(var(--x) * 1px)比calc(var(--x))更稳妥（尤其 Safari） - 移动端慎用
will-change: scroll-position，某些 Android WebView 会因此禁用原生滚动优化
变量不是万能胶水，它是把双刃剑：用对了能复用动画逻辑、减少 CSS 体积；用错了连第一帧都卡在 layout 阶段。最常被忽略的一点是——calc()不是可选语法糖，而是进入@keyframes的唯一签证。没有它，变量再灵活也进不了关键帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
