.bootstrap 4 的 .progress-bar-striped 默认无动画，需手动用 linear-gradient 替换背景、设匹配的 background-size 和 animation 位移值，并确保 css 权重足够高。
为什么 .progress-bar-striped 不动
Bootstrap 4 的 .progress-bar-striped 类只设置了静态条纹背景（base64 图片），本身不带 animation 属性。你加了这个 class，但条纹没滚动——不是代码写错了，是它压根没定义动画逻辑。
必须手动覆盖 background-image 并启用 animation
原生条纹图无法动画，得换成可控制的 linear-gradient，再配 @keyframes 驱动位移。关键三步缺一不可：
- 用
background-image: linear-gradient(...)替换默认条纹背景 - 设
background-size（比如1rem 1rem）控制条纹密度 - 加
animation: progress-bar-stripes 1s linear infinite，且选择器权重要足够高（如.progress-bar.animated或!important）
示例 CSS：
.progress-bar.animated {
background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
animation: progress-bar-stripes 1s linear infinite;
}
@keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 1rem 1rem; }
}
高度不匹配时条纹会拉伸或卡顿
如果进度条高度是 4px，但 background-size: 1rem 1rem（≈16px），条纹就会被严重压缩、错位甚至消失。此时必须同步缩放：
- 把
background-size改成0.25rem 0.25rem（对应 4px） -
@keyframes中的位移值也改成0.25rem 0.25rem - 避免用
rem单位硬编码，改用em或直接写px更可控
JavaScript 动态添加动画类容易失效
用 JS 给 .progress-bar 添加 .animated 类后动画没反应？常见原因：
- CSS 文件加载顺序不对：你的自定义样式在 Bootstrap CSS 之后才载入，但选择器权重不够，被覆盖
- HTML 中没给
.progress-bar显式设display: block或固定height，导致动画区域不可见 - 父容器有
overflow: hidden但没设position: relative，裁剪了动画位移
最稳写法是直接在 HTML 里写：<div class="progress-bar progress-bar-striped animated"></div>，再确保 CSS 权重 ≥ Bootstrap 原生规则。
background-size 和 animation 位移值是否严格一致——差一个像素，滚动就断掉。别信“差不多”，得量着高度来配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
