直接 transition: --my-var 无效，因为 CSS 自定义属性不可动画；必须通过 color、background-color、transform 等原生可动画属性间接驱动，并确保值格式一致、触发重排重绘。
为什么直接 transition: --my-var 无效
因为 --my-var 是 CSS 自定义属性，本身不可动画。浏览器不支持对自定义属性做插值计算，哪怕你写了 transition: --my-var 0.3s，也完全没反应——它不是 opacity 或 transform 那类有中间值的属性。
必须通过被过渡的属性“间接驱动”
真正能动的是 color、background-color、transform 这些原生可动画属性。你需要把 --my-var 的值“注入”到它们身上，再对这些属性加 transition：
-
color: var(--text-color);→ 对color加transition: color 0.3s -
background-color: var(--bg);→ 对background-color加transition: background-color 0.3s -
transform: scale(var(--scale));→ 对transform加transition: transform 0.3s（注意：--scale必须是纯数字，如1.2，不能带单位）
关键点：过渡声明必须写在初始元素上，且目标属性（如 color）的起始值和结束值都得是可插值格式（比如都用 rgba()，避免 red ↔ hsl() 混用）。
动态更新时要注意“值变更”的触发时机
JS 修改 --my-var 后，依赖它的属性（如 color）必须发生实际变化，transition 才会启动。常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 用
element.style.setProperty('--my-var', '255, 0, 0')改值，但color: rgb(var(--my-var))未重算 → 没变化，不动画 - 改了变量但没触发重排/重绘（比如只改了不影响样式的变量）→ 浏览器跳过过渡
- 多个变量同时更新，但只对其中一个加了
transition→ 其余仍瞬变
稳妥做法：确保每次 JS 更新都伴随一个明确的样式变更（例如先设 opacity: 0.99 再设回 1），或用 getComputedStyle 强制读取触发重排。
缩放类动画慎用 --scale + transform
如果想用 --scale 控制 transform: scale(var(--scale))，必须保证：
-
--scale初始值和目标值都是合法数字（1、1.5、0.8），不能是auto或空字符串 -
transform声明里不能混用其他函数（如scale(var(--scale)) translateX(10px)），否则整个transform值无法插值，动画失效 - 若需复合变换，建议拆成多个自定义属性（
--scale、--tx），并统一用transform: scale(var(--scale)) translateX(calc(var(--tx) * 1px))，再对transform加过渡
最易忽略的一点：transform 的插值逻辑依赖矩阵分解，当 scale 从 1 跳到 0 时，某些浏览器会退化为瞬移——此时应避免用 0，改用极小值如 0.001。
