@property 是目前唯一能让渐变背景真正平滑过渡的原生 CSS 方案，但必须满足类型声明正确、变量更新方式合规、浏览器支持到位三个硬性条件，否则动画退化为跳变或静默。
直接说结论：@property 是目前唯一能让渐变背景真正平滑过渡的原生 CSS 方案，但必须满足三个硬性条件：类型声明正确、变量更新方式合规、浏览器支持到位。不满足任一条件，动画就退化为跳变或完全静默。
为什么 background-image: linear-gradient() 不能直接 transition
浏览器把整个 linear-gradient(90deg, #ff7e5f, #feb47b) 当作一个不可拆解的 transition: background-image 0.5s，浏览器直接忽略——控制台无报错，DevTools 里也看不到任何动画轨迹。
常见错误现象包括：
- 颜色瞬间切换，毫无过渡
- 中间闪白屏（尤其在 Safari 中）
- hover 后背景“卡住”，需强制重绘才恢复
@property 必须这样注册才生效
注册不是可选步骤，而是启用插值的开关。漏掉任意一项，transition: --grad-start 0.4s 就是摆设。
-
syntax必须写成"（带引号、小写、尖括号是字面量），不能是" "color"或"" -
inherits: false是硬性要求，设为true在 Chromium 系列中会静默失效 -
initial-value必须是合法颜色值，如#3b82f6或rgb(59, 130, 246)，不能是currentcolor或空字符串 - 注册语句必须放在使用该变量的样式规则之前，且作用域覆盖目标元素（通常写在
:root）
正确示例：
@property --grad-start { syntax: "<color>"; inherits: false; initial-value: #ff7e5f; }
@property --grad-end { syntax: "<color>"; inherits: false; initial-value: #feb47b; }</color></color>
怎么用变量驱动渐变并触发过渡
注册完只是第一步，关键在「变量改，样式变，transition 才动」。必须让 background-image 的值显式依赖这些变量，并把 transition 直接写在变量名上。
- 写法必须是
transition: --grad-start 0.4s, --grad-end 0.4s，不是transition: background-image - 渐变函数里必须用
var(--grad-start)，不能只在 JS 里改值而 CSS 里没绑定 - hover 或 JS 修改时，必须用
el.style.setProperty('--grad-start', '#6366f1')，传纯颜色字符串，不能传"#6366f1 !important"或带单位 - 避免高频设置：比如在
requestAnimationFrame里每帧都 setProperty，会导致浏览器来不及插值，结果仍是跳变
完整链路示例：
:root {
--grad-start: #ff7e5f;
--grad-end: #feb47b;
}
.box {
background-image: linear-gradient(90deg, var(--grad-start), var(--grad-end));
transition: --grad-start 0.4s ease, --grad-end 0.4s ease;
}
.box:hover {
--grad-start: #6366f1;
--grad-end: #8b5cf6;
}
兼容性与容易被忽略的细节
Firefox 完全不支持 @property（截至 Firefox 128），Chrome 108+、Edge 109+、Safari 16.4+ 才可用。这意味着你必须用 @supports (property: --x) 做降级，否则用户看到的就是静态渐变。
更隐蔽的坑在于终值精度：比如用 radial-gradient(#363636 var(--d), transparent 1px) 时，--d 终值设为 0px 可能在某些 Chromium 版本中导致圆心消失；实测 0.7px 更稳。另外，initial-value 类型必须和运行时 setProperty 的值严格一致——传 "72"（字符串）和 72（数字）对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
