CSS变量加transition无效是因为浏览器将其视为字符串而不识别语义；需用@property声明类型（如<color>）并配合可动画属性（如background-color）使用，且注意兼容性与降级方案。
为什么直接给CSS变量加transition没反应
因为浏览器默认把自定义属性（--color、--size）当字符串处理，不识别其语义。哪怕你写 transition: --color 0.3s，实际什么都不会动——CSS引擎根本不知道这个变量该按颜色插值还是按长度插值。
解决办法是用 @property 显式告诉浏览器：“这个变量是颜色”“那个是数字”，它才敢在动画帧之间做合法插值。
- 必须在
:root或对应作用域里声明@property，不能写在选择器内部 - 只支持部分类型：
color、length、number、percentage、angle、time、frequency -
syntax值必须严格匹配，比如"<color>"不能写成"color"（少引号或尖括号都会失效） -
inherits: false是默认值；如果变量需继承，得显式写inherits: true
@property 声明后怎么配合 transition 使用
声明完变量类型，后续所有对该变量的修改（包括 :hover、@keyframes、JS赋值）都能触发平滑过渡，前提是目标属性本身支持动画（比如 background-color、transform 等），且你把它用在了可动画的 CSS 属性上。
常见错误是：声明了 --bg 为 <color>，但写 color: var(--bg) 却想让文字颜色动——这没问题；但如果写 border: 1px solid var(--bg)，而 border 是简写，浏览器无法单独对 color 部分做插值，得拆成 border-color: var(--bg)。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
background-color: var(--bg)、color: var(--text)、width: calc(var(--size) * 1px) - 避免简写：
margin、padding、border、flex等会干扰插值，优先用具体子属性 - JS 修改时用
element.style.setProperty('--bg', 'blue')，不是.style.--bg = 'blue'
兼容性与降级方案怎么处理
@property 目前仅 Chromium 内核（Chrome 110+、Edge 110+、Opera 96+）和 Safari 17.4+ 支持，Firefox 完全不支持。这意味着纯靠它做动画，在 Firefox 里会直接“跳变”——没有过渡，只有最终值。
不能指望用户都升级浏览器，所以得有 fallback：
- 用
@supports (--prop: 0)包裹@property声明和相关 transition 规则，避免旧引擎报解析错误 - 对关键动画，保留传统 class 切换方案（如
.state-active { background-color: blue; transition: background-color 0.3s; }）作为兜底 - JS 检测：
if (CSS && CSS.supports('property', '--foo'))再启用变量驱动逻辑 - 注意：Safari 17.4 才开始支持
@property，17.3 及更早版本即使写了也无效
JS 动态控制 @property 变量的注意事项
用 JS 改 --var 是最灵活的用法，比如根据滚动位置更新主题色，但容易忽略几个细节：
- 变量名区分大小写：
setProperty('--Color', ...)和setProperty('--color', ...)是两个变量 - 初始值必须符合
syntax类型，比如--size设为<number>，就不能初始化为'16px'（含单位），得是'16' - 动画触发依赖“计算样式变化”，如果 JS 连续快速 setProperty 多次，浏览器可能合并渲染，导致中间帧丢失——需要节流或用
requestAnimationFrame - 不要在循环里反复读写同一个变量（如
getComputedStyle(el).getPropertyValue('--x')+setProperty），性能开销大
真正麻烦的是跨浏览器一致性：Firefox 不支持 @property，也就没法靠它驱动动画，这时候 JS + class 切换仍是更稳的选择。别为了用新语法牺牲可用性。
