@property 是实现 CSS 渐变平滑动画的唯一原生方案，通过注册颜色、角度等可插值变量并配合 syntax 类型声明，使浏览器能对渐变组件做线性插值；直接 transition background-image 无效，Firefox 目前不支持 @property。
@property 本身不能直接动画化 background-image 或 linear-gradient() 的字符串值，但能让你把渐变中可插值的部分（如颜色、角度、长度）变成真正可动画的原子变量——这是唯一能实现平滑渐变动画的原生 CSS 路径。
为什么 transition: background-image 完全无效
浏览器把 background-image: linear-gradient(45deg, red, blue) 当作一个不可拆解的字符串，不识别其中的数字或颜色成分。写 transition: background-image 0.3s 看似合理，实际只会硬切——没有中间帧，控制台也不报错，纯静默失效。
- 即使你在 DevTools 里手动改
--angle发现“动了”，那也只是强制重绘的假象，不是插值动画 -
background-color只支持单色，background-image是 CSS 规范中明确标记为「不可动画属性」 - 所有声称“直接过渡渐变”的写法，本质都是切换整条
background-image值，属于离散跳变，不是平滑过渡
必须注册 @property 才能触发插值
注册不是可选项，是前提条件。浏览器默认对 --color-a 这类变量无语义，@property 的作用是告诉渲染引擎：“这个变量是 <color> 类型，请在 transition 或 @keyframes 中对其 RGB/HSL 值做线性插值”。
-
syntax必须严格匹配：颜色用"<color>"（带引号、小写、尖括号），长度用"<length>"，数字用"<number>" -
inherits: false是安全默认，设为true可能导致子元素意外继承并中断动画 -
initial-value类型必须和syntax一致，比如syntax: "<color>"就不能配initial-value: 0 - 注册必须放在
:root或目标选择器外层，不能嵌套在.card { }里
两种可靠落地方式：颜色驱动 vs 长度/角度驱动
选哪种取决于你要动什么。颜色变化走 <color>，方向或尺寸变化走 <number> 或 <length>，不能混用。
立即学习“前端免费学习笔记（深入）”；
-
颜色渐变动画：注册两个
--start-color和--end-color，都用syntax: "<color>"；然后在background-image: linear-gradient(var(--start-color), var(--end-color))中使用；transition目标写--start-color, --end-color -
角度/位移动画：比如旋转渐变边框，注册
--angle { syntax: "<angle>" }，再用conic-gradient(from var(--angle), ...)；动画写在@keyframes里修改--angle值 -
径向渐变缩放：注册
--radius { syntax: "<length>" }，然后radial-gradient(circle at center, #000 var(--radius), transparent)；终值避免用0px，推荐0.7px防 Firefox 渲染异常
Firefox 兼容性是个现实坎
截至 Firefox 128（2026 年 8 月稳定版），@property 仍未启用。这意味着你写的渐变动画在 Firefox 里会完全静默退化——既不动画，也不报错，背景就卡在初始状态。
- 必须用
@supports (property: --test)包裹全部@property和相关动画规则 - 回退方案只能靠模拟：比如用
font-size（天然可动画长度）间接驱动radial-gradient半径，或彻底降级为background-position位移动画 - 不要依赖
CSS.supports('property', '--x')在运行时动态加载，它在 Firefox 中始终返回false，且无法 polyfill
