CSS自定义属性（如--color）默认不可动画，因其无类型、无起止值；需用@property注册syntax/initial-value/inherits三者才可激活动画，或直接硬编码标准属性并transition。
因为浏览器压根不把 --x 当作可动画属性，不是你写错了，是它根本不在插值名单里。
transition: --color 0.3s 被静默忽略
浏览器只对标准属性（如 color、opacity、transform）执行数值插值；--color 是纯字符串替换，没有类型、没有起始/终点数值，连“这是个数字”都识别不出来。声明会被静默丢弃——控制台不报错，DevTools 的 Animation 面板里也看不到帧，就像没写过一样。
- 在 DevTools 的 Computed 面板检查
color值，如果显示invalid、unset或initial，说明var(--color)没落地为有效 CSS 值，插值链已断裂 - 把
transition写在:hover规则里会导致移出时跳变——过渡上下文随伪类消失，浏览器失去起点参考 - 即使 JS 调用
element.style.setProperty('--color', 'red')，若没同步触发依赖它的原生属性（比如color: var(--color)）重算并具备明确起始值，过渡也不会启动
@property 是唯一能“激活”变量动画的现代方案
@property 不是开关，而是注册表：必须同时声明 syntax、inherits 和 initial-value，三者缺一不可。漏掉任一个，它就退化为普通变量，动画能力归零。
-
syntax: '<integer>'表示该变量只接受整数，JS 传'200px'或200.5都会失败 -
initial-value: 0必须符合syntax类型，写成initial-value: '0'或initial-value: 0px都无效 - 仅 Chrome 110+ / Safari 16.4+ 支持，Firefox 至今未实现（2026 年 9 月）
- 复合值（如
--bg-pos: 0px 10px）无法被@property解析，必须拆成--bg-x和--bg-y单独注册
硬编码标准属性仍是兼容性最强的解法
放弃用变量间接驱动，直接在 class 中写死标准属性值，再统一加 transition。虽然失去变量灵活性，但 100% 可控、全浏览器支持。
立即学习“前端免费学习笔记（深入）”；
- 不要这样：
.theme-dark { --bg: #111; background-color: var(--bg); } - 要这样：
.theme-dark { --bg: #111; background-color: #111; }+.theme-light { --bg: #fff; background-color: #fff; } - 然后统一加：
transition: background-color 0.3s; - JS 动态改状态时，别靠
setProperty更新变量，直接切 class —— 避免触发 layout 强制重排，也绕开变量监听盲区
真正容易被忽略的是：变量本身不是样式属性，只是占位符；它的值不会自动触发依赖属性重算，也不参与任何插值流程。想让它“动起来”，要么注册类型（@property），要么绕过它（硬编码），没有中间路线。
