@property 是唯一支持 CSS 动画插值的自定义属性机制，需显式声明 syntax、initial-value 和 inherits；复合值须拆分为独立属性；radial-gradient 半径等需抽离为 @property；兼容性差，须渐进增强并手动降级。
@property 是唯一能让自定义属性真正参与 CSS 动画插值的机制。不声明它，--x 在 @keyframes 里只会跳变；声明了但写错，动画照样静默失效。
必须用 @property 显式声明 syntax 和 initial-value
浏览器不会自动推断 --size 是长度还是数字——它默认当普通字符串处理，无法插值。只有显式告诉它：syntax: "<length>"</length>，才能让 10px → 2px 被线性计算。
-
syntax必须严格匹配实际使用类型："<length>"</length>、"<color>"</color>、"<number>"</number>，写成"<px>"</px>或漏掉引号都无效 -
initial-value必须符合syntax类型，比如initial-value: 0px，不能写initial-value: 0 -
inherits: false是安全默认值；设为true可能导致子元素意外继承变量并触发重绘
background-position 动画必须拆成 --bg-x / --bg-y
复合值如 --bg-pos: 0px 0px 无法被 @property 解析，因 syntax 不支持空格分隔的双值。Chrome/Edge 111+ 虽支持 transition: background-position，但仅对纯数值生效（10px 20px），遇到 center 50% 就跳变。
- 声明两个独立属性：
@property --bg-x和@property --bg-y，各自syntax: "<length>"</length> - 在样式中组合：
background-position: var(--bg-x) var(--bg-y) - 分别过渡：
transition: --bg-x 0.4s, --bg-y 0.4s，方便单独调缓动或延迟
radial-gradient 半径缩放要避免 0px 终值
直接在 radial-gradient(#000 10px, transparent 1px) 中改 10px 无效——background-image 整体不可动画，浏览器无法提取并插值其中的长度。
立即学习“前端免费学习笔记（深入）”；
- 把半径抽为
--d，用@property --d { syntax: "<length>"; initial-value: 10px; }</length> - 在渐变中引用：
radial-gradient(#000 var(--d), transparent 1px) - 终值慎用
0px：部分浏览器渲染异常或圆消失，推荐0.7px或1px作为最小安全值
@supports 检测不可靠，Firefox 兜底需手动降级
@supports (@property: --x) 在旧版 Safari（如 16.3）会误报支持，结果动画完全不触发；而 @supports (background-position: 1px 1px) and (transition: --x 1s) 仍可能漏判。
- 真实兼容性策略是「渐进增强 + 显式回退」：先写
@property方案，再用@supports not (...)包裹降级逻辑 - Firefox 回退常用
font-sizehack：因它是天然可动画的<length></length>，可用em单位间接驱动尺寸，例如width: calc(var(--scale) * 1em)配合font-size动画 - 不要依赖自动检测切换；关键动效建议保留 JS 控制 fallback 路径，尤其涉及交互反馈时
真正难的不是写对 @property，而是判断哪些值值得抽离、哪些场景必须降级、以及什么时候该放弃 CSS 动画改用 transform 或 Canvas。浏览器对 @property 的支持仍处于“可用但脆弱”阶段——写完记得在 Safari 16.4、Chrome 111、Firefox 128 三端实测，别信文档里的“支持”。
