background-position动画模拟渐变流动的本质是平移宽于容器的渐变背景；需同时设置background-size（如200% 200%）和background-position（如0% 50%），配合keyframes位移实现视觉滑动效果。
为什么 background-position 动画能模拟渐变色流动
纯 CSS 实现“渐变色动起来”的本质，不是让颜色本身变化，而是让一个足够宽的线性渐变背景在固定尺寸容器内平移。只要 background-size 宽度大于容器宽度（比如 200%），再用 @keyframes 控制 background-position 从 0% 0% 到 100% 0% 连续移动，视觉上就会出现颜色滑过的效果。
关键点在于：必须同时设置 background-size 和 background-position，否则位移无效或无感。
- 推荐用
background-size: 200% 200%（双方向留余量，兼容斜向渐变） - 动画起始位置建议写成
background-position: 0% 50%，避免水平移动时顶部/底部露白 - 容器需设
background-clip: border-box（默认值，但显式声明更稳妥）
最简可用代码结构（含 vendor 兼容）
下面这段可以直接复制进项目，已包含 -webkit- 前缀和合理缓动：
.gradient-move {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b);
background-size: 200% 200%;
background-position: 0% 50%;
animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/ 兼容 Safari / iOS /
@-webkit-keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-move {
-webkit-animation: gradientShift 4s ease-in-out infinite;
}
注意：不要只加 -webkit- 前缀到 @keyframes，animation 属性本身也要带前缀才生效。
立即学习“前端免费学习笔记（深入）”；
