不能直接过渡css变量，因浏览器将其视为字符串占位符而非可动画属性；必须绑定到color、background-color等原生属性并声明transition，或用@property注册类型（chrome/safari支持）。
transition: --color 0.3s 根本不生效
浏览器压根不会解析 --color 这类自定义属性名是否可动画——它只认 color、background-color、transform 等标准属性。你写了 transition: --color 0.3s，CSS 引擎直接忽略，既不报错也不警告，视觉上就是“没反应”。
这不是写法疏漏，而是规范限制：CSS 变量本质是字符串替换占位符，不是渲染属性。浏览器在样式计算阶段才展开 var(--color)，此时过渡早已过了监听窗口。
变量值变了，但 background-color 没触发插值
即使你把 background-color: var(--bg) 写对了，也必须满足三个条件，过渡才能启动：
-
--bg在基础选择器中已显式声明初值（比如:root { --bg: #fff; }），不能靠 fallback 或继承 - hover 或 class 切换时，新值必须是可插值颜色格式，且与旧值类型一致（
hsl(0, 100%, 50%) → hsl(120, 100%, 50%)可行；#f00 → currentcolor不可行） -
transition: background-color 0.3s必须写在默认状态（非 hover / 非 .dark 类）里，否则第一帧就跳变
@property 是唯一原生解，但兼容性窄
Chrome 93+、Edge 93+、Safari 15.4+ 支持 @property，但它不是“打开开关”就行：
- 必须同时声明
syntax和inherits，缺一不可（@property --hue { syntax: '<integer>'; inherits: false; }</integer>） -
syntax值必须严格匹配 JS 修改时传入的类型（element.style.setProperty('--hue', '180')合法；传'180deg'就失效） -
initial-value也得符合syntax类型，否则注册失败，变量退化为普通字符串
Firefox 至今（2026年9月）仍未实现 @property，用它就得接受降级方案。
真正可靠的方案只有绑定到原生可动画属性
别指望变量自己动起来。能平滑过渡的永远是 transform、opacity、color 这些属性本身。变量只负责提供数值，而过渡逻辑必须落在它们身上：
- 尺寸变化优先用
transform: scale(var(--scale))+transition: transform，别碰width/height - 位移用
transform: translateX(calc(var(--offset) * 1px))，calc()是强制解析为可动画值的关键 - 颜色过渡必须确保两端都是明确色值，
transparent或inherit会中断插值路径
最常被忽略的一点：JS 修改变量后，浏览器不会自动重算依赖属性。你需要手动触发重排（如读取 offsetHeight）或推到下一帧，否则连“变”都看不到，更别说“过渡”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
