css无法直接动画background-image的渐变色值，需用background-position配合repeating-linear-gradient或位移背景图模拟颜色流动；关键要设固定background-size、repeat模式，并用像素单位位移实现无缝循环。
keyframes 里不能直接动画 background-image 的渐变色值
浏览器不支持对 linear-gradient() 中的颜色停靠点（如 #ff0000、#00ff00）做插值动画，直接写在 @keyframes 里会静止或跳变。真正能动的是「渐变的位置」——得靠 background-position 配合重复渐变（repeating-linear-gradient）或位移背景图来模拟颜色流动感。
用 background-position 推动重复渐变实现平滑位移
核心思路：把渐变做成一个窄条（比如宽 20px），用 repeating-linear-gradient 水平铺满，再通过 background-position 持续右移，视觉上就是颜色在滚动。
-
background-size必须设为固定值（如20px 100%），否则位移无效 -
background-repeat要设为repeat（默认就是，但显式写更稳） - 动画时长和方向要匹配位移量，比如
background-position: 0 0→20px 0才能无缝循环 - 别用百分比位移（如
100%），不同容器宽度下会断帧；用像素或vw等相对单位更可控
@keyframes moveGradient {
0% { background-position: 0 0; }
100% { background-position: 20px 0; }
}
.element {
background: repeating-linear-gradient(
90deg,
#ff0000,
#ff0000 10px,
#00ff00 10px,
#00ff00 20px
);
background-size: 20px 100%;
animation: moveGradient 2s linear infinite;
}
用 background-image + background-position 动画单次渐变时的坑
如果不用重复渐变，而是想让一个完整渐变（如从左红到右蓝）“滑过”元素，本质是移动整个渐变图像。这时必须注意：
- 渐变本身没尺寸，
background-size不生效，得靠background-position的位移范围匹配容器宽高 - 例如容器宽 300px，想让渐变从左进到右出，
background-position就得从-300px 0动到300px 0 - 动画函数选
linear，避免缓动导致速度不均、颜色卡顿 - Chrome 有渲染优化，纯 CSS 渐变位移偶尔掉帧，加
will-change: background-position可缓解
兼容性与性能提醒
background-position 动画在所有现代浏览器都支持，但 Safari 对 repeating-linear-gradient 的解析稍慢，尤其在 transform 层叠时可能闪烁。如果用于按钮或高频交互区域：
立即学习“前端免费学习笔记（深入）”；
- 避免同时动画多个背景层（比如叠加阴影+渐变）
- 别在
:hover里直接触发长动画，建议用transition控制入场，或用 JS 控制播放/暂停 - 移动端要注意，
background-position动画不是合成属性，会触发重排重绘，不如transform流畅
真正难的不是写出来，是让颜色动得匀、不闪、不卡，还适配各种屏幕缩放和暗色模式切换——这些细节往往在测试阶段才暴露。
