JavaScript 改 CSS 变量本身不触发动画，需将变量绑定到支持过渡的原生属性（如 transform、opacity），并显式声明该属性的 transition（如 transition: transform 0.3s ease），且注意 Safari 等浏览器兼容性及 calc() 导致过渡失效问题。
怎么用 JavaScript 改 CSS 变量来触发动画
直接改 --color 或 --scale 这类自定义属性，本身不会触发 CSS 动画或过渡——除非你提前在 CSS 里声明了对应属性的 transition，且该变量被用在支持动画的原生属性上（比如 background-color、transform）。
常见错误是以为只要改了 --size，再在 transform: scale(var(--size)) 里引用，就能自动动起来。其实不会：CSS 不会监听变量变化，它只在计算样式时“快照”一次值。
- 必须显式写
transition: transform 0.3s ease（不是transition: --size） - 变量得绑定到**实际可动画的属性**上，比如
transform、opacity、background-color，不能绑到display或z-index - 如果用
calc()或函数包裹变量（如scale(calc(var(--factor) * 1))），部分浏览器可能跳过过渡（尤其 Safari 15–16）
CSS 变量 + transition 的兼容性坑在哪
Chrome 49+、Firefox 42+、Safari 15.4+ 支持变量参与 transition，但行为不一致：
- Safari 对
transform: translateX(var(--x))的过渡支持不稳定，建议改用transform: translateX(calc(var(--x) * 1px))显式带单位 - Edge 18 及更早版本完全不支持变量驱动过渡，需降级为 class 切换
- 如果变量初始值是空或无效（如
--delay: ;），某些浏览器会中断整个 transition 链
验证方法：打开 DevTools → Elements → Styles，手动修改变量值，看右侧是否出现「transitioning」状态条。
立即学习“前端免费学习笔记（深入）”；
JS 更新变量的正确姿势（避免重排/卡顿）
别用 element.style.setProperty('--val', '100px') 频繁调用——它本身不卡，但若同时触发 layout（比如读取 offsetHeight），就会强制同步重排。
- 批量更新多个变量时，用
element.style.cssText += '--a:1; --b:2;'比多次setProperty略高效（但差异微小，优先可读性） - 动画中高频更新（如拖拽）务必用
requestAnimationFrame节流，否则可能丢帧 - 避免在
scroll事件里直接改变量；加防抖或用IntersectionObserver替代
示例：
function updateScale(el, value) {
requestAnimationFrame(() => {
el.style.setProperty('--scale', value);
});
}
为什么 animation-timing-function 有时失效
根本原因：CSS 变量只能提供“静态值”，无法表达时间曲线本身。所谓“变量控制缓动”，其实是靠 JS 在每帧算出当前值，再塞进变量——这本质上绕过了 CSS 的 timing function。
- 如果你写
transition: --progress 0.5s cubic-bezier(0.2, 0.8, 0.4, 1)，这是无效语法，浏览器忽略整行 - 真正起作用的是绑定变量的那个属性本身的 transition，比如
width有 cubic-bezier，那它就按那个曲线动；变量只是喂数据的管道 - 想动态切缓动？只能 JS 控制不同 class（含不同
transition-timing-function），或用 Web Animations API
变量适合控制“状态”和“幅度”，不适合替代 CSS 的时间建模能力。这点容易高估它的作用边界。
