background-position能动而background-image不能，因linear-gradient()是静态值无法插值，background-position是数值型属性支持硬件加速；渐变动效本质是拖动超大渐变画布的观看窗口。
直接改 background-image 不会动，必须用 background-position 动画才能实现真正平滑的渐变流动效果。
为什么 background-position 能动而 background-image 不能
因为 linear-gradient() 是静态值，浏览器无法在两帧之间插值；background-position 是数值型属性，支持硬件加速和平滑过渡。所谓“渐变动效”，本质是把一张超大渐变图当画布，再用 background-position 当镜头去拖动观看区域。
- 写
animation: changeBg 3s linear infinite+from { background-image: linear-gradient(0deg, red, blue); }→ 浏览器静默忽略，毫无反应 - 漏掉
background-size或初始background-position→ 动画起点不生效，Safari 尤其明显 - 用像素单位（如
background-position: 0px 50%）→ 响应式失效，不同宽高比下位移距离错乱
三个必须同时声明的 CSS 属性
缺一不可，否则动画要么卡住、要么退化成整块背景平移。
-
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b3a2);—— 提供渐变源，不能写在background简写里覆盖掉其他项 -
background-size: 400% 100%;—— 水平拉伸 4 倍，给background-position移动留足空间；若用to bottom渐变，则改用100% 400% -
background-position: 0% 50%;—— 显式声明起始点，否则部分浏览器不触发动画
@keyframes 中的位移值怎么写才对
关键帧里的 background-position 必须用百分比，且要和 background-size 的轴向匹配：
- 水平流动（
90deg渐变）→0% 50%→100% 50%，或循环用0% 50%→100% 50%→0% 50% - 斜向流动（
45deg）→ 推荐用0% 0%→100% 100%，避免只动单轴导致颜色“偏移” - 想停顿再走？别用
cubic-bezier，改在@keyframes里加中间帧：0%, 20% { background-position: 0% 50%; } 70%, 100% { background-position: 100% 50%; }
容易被忽略的兼容性与性能细节
看似写对了，但上线后 Safari 卡顿、移动端掉帧、滚动时背景跳动——往往栽在这几处：
- 动画必须加
animation-timing-function: linear，任何ease都会让速度忽快忽慢，破坏“流动感” - 移动端低端设备上，
animation-duration建议 ≥6s，太短易触发丢帧 - 容器尺寸动态变化（如 flex 子项缩放）时，
background-size: 400% 100%会重算，可能造成突跳；此时可考虑固定宽高或 JS 监听 resize 后重设 - 务必加
@media (prefers-reduced-motion: reduce) { animation: none; }，这是 WCAG 2.1 强制要求
最常出问题的是渐变方向和 background-size 轴向没对齐：比如写了 to bottom 却设 background-size: 400% 100%，结果位移全在水平方向跑，颜色根本不往下流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
