必须用 background-image 替代 background-color 才能实现 Bootstrap 4 进度条的流动动画，因 CSS 动画无法驱动 background-color 位移；需配合 linear-gradient、background-size: 300% 100% 和 background-position 动画实现平滑滚动效果。
用 background-image 替代 background-color 才能生效
Bootstrap 4 的进度条默认靠 background-color 控制颜色，但 CSS 动画无法直接驱动 background-color 实现“流动”效果——它只能做颜色切换，没法位移。真正要动起来，必须用 background-image 配合 linear-gradient + background-size + background-position 三件套。
常见错误是直接给 .progress-bar 加 animation: move 3s linear infinite 却没改背景类型，结果动画跑起来了，但条纹纹丝不动。
实操建议：
- 删掉所有
background-color相关声明（包括 Bootstrap 默认的bg-*类） - 用
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b)定义多色横向渐变 - 设
background-size: 300% 100%—— 宽度拉到 3 倍，才够后续位移空间 - 加
background-position: 0% 0%作为动画起始点
@keyframes 里只动 background-position 的 X 轴
渐变“流动”的本质是让背景图横向滚动。如果 X 轴从 0% 移到 -100%，配合 background-size: 300% 100%，视觉上就是连续平滑的彩色带子往左滑。
立即学习“前端免费学习笔记（深入）”；
别碰 Y 轴，也别写成 100% —— 那会导致跳帧或回弹。正确写法是：
@keyframes move {
0% { background-position: 0% 0%; }
100% { background-position: -100% 0%; }
}注意：这个动画必须绑定在 .progress-bar 上，不能绑在外层 .progress；否则会被父容器裁剪或干扰定位。
兼容性关键：加 transform: translateZ(0) 防卡顿
纯 background-position 动画在部分 Chrome/Firefox 版本中会掉帧，尤其进度条宽度变化频繁时（比如配合 JS 实时更新）。这不是 Bug，是浏览器对背景动画的硬件加速策略较弱。
解决方法简单粗暴：
- 给
.progress-bar加transform: translateZ(0)或will-change: background-position - 二者选一即可，
translateZ(0)兼容性更好（IE11+ 都认） - 不要同时加，避免触发多余重绘
- 如果用了
transition控制进度变化（比如从 20% → 80%），记得把transition写在.progress-bar上，且避开background-position—— 否则和动画冲突
动态进度 + 流动动画共存时，别用 width 写死
很多人把进度条写成 <div class="progress-bar" style="width: 65%">，再叠流动动画，结果动画只在 65% 区域内循环，看起来像一段短彩带原地抖动。<p>正确做法是让动画区域始终铺满整个 <code>.progress-bar 容器，进度靠 width 控制可见范围，动画靠背景独立跑：
- 确保
.progress-bar的height和line-height一致（防文字偏移） - 动画样式写在
.progress-bar::after伪元素上更稳妥（避免和 width 冲突），但需设content: ""+position: absolute+ 满覆盖 - 更推荐方案：保留
width控制进度，但把渐变动画写在.progress-bar本体，并用overflow: hidden在外层.progress上裁剪——这样动画永远全宽跑，显示多少只由 width 决定
最易被忽略的是：动画速度和进度更新频率无关。哪怕进度停在 30%，流动动画仍该匀速持续——这是“炫彩”感的来源。强行让动画随进度快慢变化，反而显得卡顿不专业。
