background-image不可动画，因属离散值无法插值；可用background-position位移、伪元素opacity切换或@property变量插值模拟过渡。
为什么 background-image 不能 transition
这不是浏览器 bug，而是规范限制：background-image 属于离散型值（比如 url()、linear-gradient()、radial-gradient()），无法线性插值。浏览器连“中间状态是什么”都无法计算，自然没法生成过渡帧。
真正能被平滑过渡的只有标量属性：background-color、opacity、transform、background-position（注意：不是 background 简写，而是单独控制它）。
用 background-position 实现渐变“位移式”过渡
这是唯一全平台兼容、无需 JS、纯 CSS 可控的方案，原理是把渐变当做大图来“拖动”：
-
background-size必须 ≥ 200%，推荐设为400% 400%，否则位移范围太小，动画生硬 -
background-position初始值和目标值单位必须一致（如都用%），且方向匹配：水平渐变只动第一个值（0% → 100%），垂直只动第二个（0% → 100%） - 避免用
background简写覆盖——它会重置background-position和background-size，导致 transition 失效 - 示例：
background: linear-gradient(90deg, #ff6b6b, #4ecdc4); background-size: 400% 400%; background-position: 0% 50%; transition: background-position 1.2s ease;，hover 时改为background-position: 100% 50%
用伪元素 + opacity 模拟双渐变切换
适合两个结构差异大（比如方向不同、色 stops 数量不同）的渐变之间切换，兼容性最好（IE11+）：
- 主元素设
position: relative，伪元素::before绝对定位盖满，初始opacity: 0 - 主元素背景设为起始渐变，伪元素设为目标渐变
- 给伪元素加
transition: opacity 0.5s ease，hover 或 class 切换时设opacity: 1 - 务必加
background-clip: padding-box，防止边框干扰叠加区域 - 不要漏掉
z-index: -1或明确层级，否则伪元素可能遮挡内容
@property + CSS 变量驱动渐变插值（现代浏览器限定）
Chrome 111+ / Safari 16.4+ 支持，Firefox 至今（2026 年中）仍不支持该插值：
- 先声明自定义属性：
@property --grad-start { syntax: "<color>"; inherits: false; initial-value: #ff6b6b; }</color> - 元素上用
background: linear-gradient(45deg, var(--grad-start), var(--grad-end)) - 在基础 class 中写
transition: --grad-start 0.4s, --grad-end 0.4s - hover 或 class 切换时修改变量值，浏览器会自动插值颜色
- ⚠️ 注意：所有 stop 位置必须固定（如
0%, 100%），不能混用变量和百分比位置；变量名不能带函数或单位
background-position；只跑 Chrome/Safari 新版且颜色变化为主？@property 最干净。别指望一行 transition: background 解决问题——那行代码从 2012 年起就只是个幻觉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
