background-position实现渐变动画的本质是位移大尺寸渐变背景图而非颜色插值，需配合background-image、足够大的background-size及百分比定位；不支持色值过渡，且存在性能与兼容性限制。
background-position 实现渐变背景动画的原理和限制
用 background-position 做“渐变背景动画”其实不是真正在改变颜色，而是让一个**大尺寸线性渐变背景图在容器内平移**，视觉上产生颜色流动感。它本质是位移动画，不是色值过渡。
常见错误是直接对 background-color 用 background-position —— 这完全无效，因为纯色没有“位置”可偏移。
- 必须使用
background-image: linear-gradient(...)作为背景 - 渐变区域要足够宽（比如
200%宽度），否则平移时会露出边缘空白 - 容器需设
background-size（如200% 200%）才能配合background-position动起来 - 动画只能沿 X/Y 方向“滑”，不能实现颜色本身从蓝变红这种色相变化
@keyframes 中 background-position 动画写法
关键帧里改 background-position 是最常用方式，兼容性好（IE10+），性能也较优（只触发合成层重绘）。
@keyframes slideBg {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
注意点：
立即学习“前端免费学习笔记（深入）”；
