background-image 不支持 transition 动画，因其属非可动画属性，浏览器不插值 linear-gradient 颜色停靠点；可靠方案仅有 background-position 位移模拟和伪元素 opacity 切换。
background-image 为什么 transition 不生效
直接写 transition: background-image 0.3s 或 transition: background 0.3s 都不会产生平滑过渡——浏览器根本不插值两个 linear-gradient() 的颜色停靠点。这不是你代码写错，而是 CSS 规范明确将 background-image 列为“非可动画属性”，<image></image> 类型不支持插值。Chrome/Firefox/Safari 均静默忽略该声明，hover 时只会硬切。
用 CSS 变量 + background 简写实现真渐变过渡
仅在 Chrome 111+ 和 Safari 16.4+ 中可靠，Firefox 至今（2026 年中）仍不支持。关键在于把颜色抽成变量，且整个渐变声明必须完全由变量驱动：
-
--start和--end必须在 :root 或元素级定义，hover 时只改变量值 -
background简写里不能混用固定值，例如background: linear-gradient(45deg, var(--start), #000)会破坏插值 - 示例写法：
.btn { --start: #ff6b6b; --end: #4ecdc4; background: linear-gradient(45deg, var(--start), var(--end)); transition: background 0.4s ease; } .btn:hover { --start: #ffd166; --end: #06d6a0; }
用 background-position 模拟流动渐变
兼容性最好，所有现代浏览器都稳，适合需要横向/纵向“流动感”的场景：
-
background-size至少设为400% 400%，否则位移范围太小，动画抽搐 - 初始和 hover 的
background-position单位必须统一，比如都用%（0% 50%→100% 50%） - 别在 hover 里写
background: linear-gradient(...)简写，它会重置background-size和background-position - 水平流动只动第一个值，垂直流动只动第二个值；双轴动需同步覆盖周期，如
0% 0%→100% 100%
用伪元素 + opacity 切换不同渐变
适合结构差异大（比如 to right vs to bottom）、颜色停靠点完全不同的渐变切换：
- 主元素设
position: relative，伪元素::before和::after绝对定位铺满 - 两层分别写不同
background-image: linear-gradient(...)，初始一层opacity: 1，另一层opacity: 0 -
transition: opacity 0.4s ease-in-out加在伪元素上，hover 时切换 opacity - 务必加
background-clip: padding-box，避免边框干扰叠加效果 - 别给伪元素加
will-change: opacity——iOS Safari 容易卡顿或跳帧
background-position 位移模拟，或用伪元素 opacity 切换。CSS 变量方案看着简洁，但 Firefox 不支持，生产环境要兜底。很多人卡在“写了 transition 却没动画”，本质是误信了 background-image 可被插值——它不是 bug，是规范限制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
