CSS变量无法直接动画，因其被浏览器视为字符串而非可插值数值；需用@property声明syntax和inherits类型才支持补间。
为什么传统 CSS 变量无法直接动画
直接说结论：--opacity: 0.5 这类变量在 transition 或 @keyframes 中根本不会动。浏览器把它当字符串处理，0.5 → 1 不是数字插值，而是两个字符串的“拼接式”切换，结果就是跳变、卡顿或完全静默失效。
典型症状包括：transition: --scale 0.2s 写了但没反应；calc(var(--x) * 2) 报错；JS 调用 element.style.setProperty('--x', 0.7) 后动画中断——这些不是你写错了，是浏览器压根没把变量当数字看。
@property 让变量真正“有类型”
@property 的核心价值就一条：它用 syntax 和 inherits 两个必需参数，把变量从“任意字符串”升级为“带契约的值”。浏览器据此知道该用哪种算法插值。
-
syntax: "<number>"→ 支持0 → 100线性插值 -
syntax: "<color>"→ 支持 HSL 空间平滑过渡（不是 RGB 简单混合） -
syntax: "<angle>"→ 正确处理350deg → 10deg的短路径旋转 -
inherits: false是动画场景下的安全默认，避免父级值意外覆盖
漏掉任一参数，声明即失效——@property --x { syntax: "<number>" } 缺少 inherits，浏览器仍按普通变量处理。
立即学习“前端免费学习笔记（深入）”；
它真正解决的三个实操问题
不是炫技，是填坑：
-
渐变色动态切换：没有
@property，--bg: linear-gradient(...)无法transition；加上@property --hue { syntax: "<number>" }，再用hsl(var(--hue), 80%, 60%)就能丝滑变色 -
JS 与 CSS 动画协同：JS 调用
setProperty('--progress', 75)（注意是数字，不是'75%'），CSS 才能正确驱动width: calc(var(--progress) * 1%) -
错误前置拦截：设了
syntax: "<color>"，若误写--theme: 123，Chrome 控制台会直接报错，而不是等运行时才发现样式崩了
兼容性不是“能不能用”，而是“怎么兜底”
目前仅 Chromium（Chrome 110+、Edge 110+）和 Safari 16.4+ 原生支持，Firefox 仍未跟进。这意味着：
- 必须用
@supports (@property: --x) { ... }包裹现代逻辑 - 降级不能只写
/* fallback */，得提供可工作的替代方案，比如 class 切换 +transition: background-color -
syntax值别用太激进的组合，例如"<length> | <percentage>"在部分 Safari 版本中行为不一致
最易被忽略的一点：@property 声明必须出现在顶层 CSS 中，不能嵌套在 @media、@layer 或选择器内部——放错位置，整个声明就静默失效。
