CSS过渡可作用于CSS变量，但仅当变量被用于支持动画的属性（如color、transform）且其值变化导致该属性实际改变时生效；浏览器过渡的是属性计算后的值，而非变量本身。
CSS 过渡能否作用于 CSS 变量
可以，但有明确限制：transition 本身不直接“过渡”CSS 变量，而是过渡那些**被变量赋值的、支持动画的属性**（如 color、background-color、transform 等）。只要变量用于这些可动画属性，且变量值变化导致该属性值实际改变，过渡就会生效。
关键点在于：浏览器计算出最终样式后，过渡的是**属性值的变化过程**，不是变量名或变量声明本身。
如何用 CSS 变量触发过渡效果
必须满足两个条件：变量被用在支持过渡的属性上；变量值变化引起该属性计算结果改变。常见写法：
- 在元素上定义变量（如
--main-color: #007bff），再在属性中引用（如color: var(--main-color)） - 通过类切换、伪类（
:hover）、JavaScript 修改style.setProperty()或className来更新变量值 - 确保对应属性已声明
transition，例如transition: color 0.3s ease
示例：
立即学习“前端免费学习笔记（深入）”；
.box {
--text-color: #333;
color: var(--text-color);
transition: color 0.2s;
}
.box:hover {
--text-color: #007bff;
}
悬停时，color 从 #333 变为 #007bff，过渡生效。
哪些 CSS 变量值能被平滑过渡
不是所有变量值都能产生过渡效果。只有当变量参与计算的最终属性属于「可动画属性」，且其新旧值是可插值类型时，才真正过渡：
- ✅ 支持：颜色（
var(--c1)→var(--c2)，两者均为rgb()或十六进制）、长度（var(--size)→ 不同px/em值）、数字（opacity、z-index不行，但transform: scale(var(--s))可以） - ❌ 不支持：关键字（
var(--disp)从block→flex）、字符串、display/position等非连续属性、无法插值的混合单位（如var(--w)从100px→50%） - ⚠️ 注意：
transform中多个函数共存时（如translateX(var(--x)) rotate(var(--r)deg)），任一参数不可插值会导致整个transform跳变
JS 动态修改变量时过渡失效的常见原因
用 JavaScript 修改 style.setProperty('--my-var', newValue) 后过渡没反应，通常因为：
- 目标属性未声明
transition（比如只写了transition: all 0.3s，但all不包含自定义变量，它只影响最终渲染属性） - 变量变更后，对应属性的计算值未发生实际变化（例如
--size从"12"改成"12px"，但font-size: var(--size)原本就解析为12px，无变化） - 在同一个 JS 任务中连续设置变量和触发布局（如读取
offsetHeight），导致浏览器跳过中间状态，直接渲染终值 - CSS 优先级问题：内联样式变量被其他更高权重要求覆盖，实际生效的属性值没变
稳妥做法：确保过渡声明在 CSS 中明确写出（如 transition: background-color 0.25s, transform 0.25s），并在 JS 中只改变量，不手动干预属性。
变量让过渡更灵活，但别指望它绕过 CSS 动画的基本规则——最终起作用的，永远是那个被计算出来的、可动画的属性值。
