background: linear-gradient() 无法直接 transition 是因为 background-image 不可被监听，真正可过渡的是 background-position 和 background-size；需配合足够大的 background-size（如 300% 300%）与精确的 background-position 控制实现平滑流动动画。
为什么 background: linear-gradient() 直接 transition 不动？
因为 background-image 本身不能被 transition 监听——写 transition: background 0.3s 看似合理，实际多数浏览器会“跳变”，尤其三色以上渐变时更明显。
真正可过渡的属性是 background-position 和 background-size。关键不是改颜色，而是“移动”渐变图层。
- 必须配
background-size: 200% 100%（或更大，如300% 300%），否则background-position移动无效 - 初始
background-position建议设为0% 50%或0% 0%，便于动画起止控制 - 方向角度要和
linear-gradient()一致，比如90deg对应左右流动，-45deg对应斜向流动
怎么写一个平滑流动的渐变按钮动画？
用 @keyframes 控制 background-position 循环位移，配合足够大的 background-size 实现无缝滚动效果。
示例：
.btn-flow {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b);
background-size: 300% 300%;
animation: gradientShift 4.5s ease-in-out infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
-
background-size至少要比渐变色数量 × 100% 大（4色就建议 ≥ 400%），否则会出现“断层”或卡顿 - 动画时长别太短（
- 移动端需加
will-change: background-position防掉帧，尤其在低端安卓机上
鼠标悬停时怎么暂停流动动画？
不能只在 :hover 里加 animation-play-state: paused——如果初始没启动动画，悬停时再加会导致闪一下。
正确做法是：初始化就带动画，悬停只切播放状态。
- 初始类必须声明
animation，哪怕时长设长一点（如8s）也比不声明强 -
:hover中只写animation-play-state: paused，不要删或重写整个animation - 如果还要加悬停变色（比如加深背景），建议用
background-color叠加，而不是覆盖整个background，否则会中断渐变动画
IE11 和移动端有哪些兼容性坑？
IE11 不支持 background-position 动画（即使写了也静止），且 linear-gradient() 必须加 -ms- 前缀、方向关键词要用 to right 而非 90deg。
移动端常见问题：
- iOS Safari 旧版对
background-size> 200% 的动画支持不稳定，建议上限控在250% 250% - 安卓 Chrome 某些版本中，
animation-timing-function: ease-in-out在background-position上表现异常，换linear更稳 - 务必加
touch-action: manipulation，否则点击反馈延迟；:active状态要单独定义背景色，不然悬停暂停后点击无反馈
最易被忽略的点：所有渐变动画都依赖 background-size 与 background-position 的配比关系，调错一个值，整个动画就卡死或跳变——别只调动画时间，先验算尺寸比例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
