css变量在transition或@keyframes中无法补间，因其被浏览器视为字符串替换而非可插值属性；需用@property注册类型（如syntax: ''）或改用color、transform等标准属性硬编码实现过渡。
CSS变量（--xxx）在transition或@keyframes中不补间，不是你写错了，而是浏览器压根不把它当可动画属性处理——它被当作字符串替换，不是数值插值。没有“改个写法就自动生效”的捷径。
为什么transition: --color 0.3s完全没反应
浏览器只对标准 CSS 属性（如color、opacity、transform）做插值计算；--color这种自定义属性不在白名单里，transition声明会被静默忽略，控制台也不报错。
- 即使你在
:hover里改style.setProperty('--color', 'red')，只要没同步触发color的重算和重排，过渡就不会启动 -
DevTools → Computed里检查color值，如果显示invalid或unset，说明依赖链断了——var(--color)没落到可动画属性上 - 把
transition写在:hover规则里（而非基础选择器）会导致移出时跳变，因为过渡上下文随伪类消失
用@property注册变量才能真正补间
这是目前唯一能让--hue、--size等变量参与插值的原生方案，但要求 Chrome 110+ / Safari 16.4+，且声明必须完整：
-
syntax必须匹配值类型：syntax: '<angle>'</angle>才支持45deg→360deg插值；写成'<number>'</number>会拒收带单位的值 -
initial-value必须与syntax严格一致，比如initial-value: 0deg不能简写为0 -
inherits: false是常规选择；设为true可能让子元素意外继承并干扰动画范围 - 动画必须加在声明该变量的元素上，不能靠父容器
animation去驱动子元素的--x
更稳妥的替代方案：放弃变量驱动，改用标准属性硬编码
如果你需要兼容 Safari 16.3 或旧版 Chrome，或者项目不允许用实验性特性，就别强撑变量过渡：
- 把
--bg和background-color解耦：.theme-dark { --bg: #111; background-color: #111; }，然后transition: background-color 0.3s - 用
transform代替left/top位移，用opacity代替visibility显隐——它们原生支持 GPU 加速，且无需变量介入 - JS 切 class 时，确保
transition始终挂在基础类上（如.btn），而不是只写在.btn.active里 - 动态改变量后想强制重绘，读一次
offsetHeight比setTimeout(..., 0)更可靠
真正的难点不在语法，而在理解 CSS 动画模型的边界：变量是样式复用工具，不是动画原语。想同时要灵活性和过渡效果，就得接受权衡——要么降级用标准属性，要么锁死浏览器版本并配好@property降级兜底逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
