@property 是启用 css 自定义属性动画的必要前提，而非性能优化；它通过 syntax 和 inherits 声明类型与继承性，使变量支持插值，否则 transition 对 --var 无效且静默失效。
不是性能更好，而是只有加了 @property，变量才能参与动画和过渡——常规 --var 根本不支持插值，谈不上“性能”。
transition: --x .3s 为什么完全没反应
浏览器把 --x: 0.5 当作字符串，不是数字；--x: red 也不是颜色对象。它不会尝试解析 0.5 → 1 是线性增长，也不会把 red → blue 映射到 HSL 空间做平滑混合。结果就是：写上 transition 也跳变、卡顿或静默失效。
- 典型现象：
transition: --opacity .2s写了但 hover 时直接闪现，无缓动 - 更隐蔽的问题：
calc(var(--scale) * 10px)在未注册@property时可能报错或返回NaN - JS 调用
el.style.setProperty('--scale', 1.2)后，CSS 动画仍不动——不是 JS 没生效，是 CSS 层压根没把它当可插值类型
@property 的 syntax 和 inherits 缺一不可
@property 不是“加速器”，它是“类型注册契约”。漏掉任一必需参数，整个声明静默失效，浏览器退回按普通字符串处理。
-
syntax: "<number>"</number>告诉浏览器：这个变量值要走浮点数插值算法 -
inherits: false是动画场景下的安全默认——避免父元素的--hue值意外覆盖子元素动画起点 -
initial-value: 0deg必须与syntax类型匹配，否则声明无效（例如syntax: "<color>"</color>却写initial-value: 123）
真正影响性能的关键在“哪里声明”和“谁在读”
性能差异不在 @property 本身，而在它启用的计算路径：
- 没
@property：浏览器跳过所有插值逻辑，var(--x)只是字符串替换，快但无动画能力 - 有
@property：浏览器启用专用插值引擎（如角度走圆周最短路径、颜色走 HSL 插值），开销略高但值得 - 高频更新时，
el.style.setProperty('--x', val)仍是惰性求值，不触发重排；而直接改el.style.transform会强制同步布局
@property 声明位置错误=完全失效
它必须出现在顶层 CSS 中，不能嵌套在 @media、@layer 或任何选择器内部。放错位置，控制台不会报错，但动画就是不动——这是最容易被忽略的硬性限制。
- ✅ 正确：
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }</angle>（独立于所有规则） - ❌ 无效：
@media (prefers-reduced-motion) { @property --angle { ... } }（嵌套导致静默丢弃） - ❌ 无效：
.card { @property --size { ... } }（选择器内声明不被识别）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
