CSS transition 对自定义属性 var(--x) 无效，因浏览器仅支持对标准属性（如 color、transform）插值；--x 是字符串替换，不在可动画白名单中，声明被静默忽略。
CSS transition 对 var(--x) 无效，不是你写错了，是浏览器根本不支持对自定义属性做插值计算。
为什么 transition: --color 0.3s 完全没反应
浏览器只对标准属性（如 color、opacity、transform）执行数值插值；--color 是字符串级替换，不在可动画属性白名单里。声明会被静默忽略——控制台不报错，DevTools 的 Animation 面板里也看不到帧，transition 就像没写过一样。
- 即使你在
:hover或 JS 中调用element.style.setProperty('--color', 'red')，只要没同步触发依赖它的原生属性（比如color: var(--color)）重算并具备明确起始值，过渡就不会启动 - 在 DevTools 的 Computed 面板里检查
color值，如果显示invalid、unset或initial，说明变量未落地为有效 CSS 值，插值链已断裂 - 把
transition写在:hover规则里会导致移出时跳变——因为过渡上下文随伪类消失，浏览器失去起点参考
怎么让颜色/尺寸随变量变化产生过渡
目前只有两条路径能真正走通，没有第三种“既用变量又平滑过渡”的通用解：
-
用
@property注册变量类型（现代方案）：必须完整声明syntax、initial-value和inherits，例如：@property --hue { syntax: '<integer>'; inherits: false; initial-value: 0; }之后才能写transition: --hue 0.3s。但仅 Chrome 110+ / Safari 16.4+ 支持，Firefox 至今不支持（2026 年 8 月） -
放弃变量驱动，硬编码标准属性（兼容方案）：把
--bg和background-color解耦，例如：.theme-dark { --bg: #111; background-color: #111; }<br>.theme-light { --bg: #fff; background-color: #fff; }再统一加transition: background-color 0.3s。失去变量灵活性，但 100% 可控
JS 动态改变量后过渡仍不触发的常见原因
即使 transition 已写在基础类里，JS 修改 --x 后动画也不动，往往是因为浏览器没被“提醒”要重算依赖属性：
立即学习“前端免费学习笔记（深入）”；
- 修改完
style.setProperty('--x', '200px')后，立刻读取一个触发 layout 的属性，比如offsetHeight，强制浏览器同步重排 - 或用
setTimeout(() => { /* 触发重绘 */ }, 0)把后续状态更新推到下一帧 - 更稳妥的做法：别靠变量间接驱动，直接切 class 控制
transform或opacity——它们原生可动画，且不依赖变量解析链
真正容易被忽略的是：变量本身不是样式属性，只是占位符；过渡生效的前提，永远是某个**被变量计算后的标准属性**，在基础选择器中拥有明确的初始值、持续存在的 transition 声明，以及可插值的终值。任何一环断掉，动画就退化为瞬移。
