直接改 animation-duration 无效是因为 Bootstrap 的 animation 是完整声明，行内样式无法局部覆盖；必须重写 .progress-bar-animated 类并指定完整 animation 值，且置于 Bootstrap CSS 之后。
直接改 animation-duration 无效？原因在这
给 .progress-bar-animated 元素加 style="animation-duration: 0.4s" 不起作用，是因为 bootstrap 的 css 规则里 animation 是完整声明（含 timing function 和 iteration），行内样式无法局部覆盖其中一项。浏览器会忽略这种“半截式”覆盖。
用 CSS 覆盖 animation-duration 才生效
必须在自定义 CSS 中重写类选择器，并显式指定完整的 animation 值：
.progress-bar-animated {
animation: progress-bar-stripes 0.4s linear infinite;
}
- 这个规则必须放在 Bootstrap CSS 之后加载，否则会被原生样式覆盖
- 值别设太小（
）：低端设备可能卡顿或跳变 - 别设
0s：会退化为无动画的瞬时填充 - 如果用了 SCSS 源码，优先改变量
$progress-bar-animation-timing，再@importBootstrap
改太快导致条纹“拖影”或“回弹”？检查位移匹配
条纹滚动本质是靠 background-position 在固定尺寸背景图上位移。动画变快后，常见视觉问题源于位移距离和背景图尺寸不匹配：
- 原
@keyframes progress-bar-stripes中from { background-position: $progress-height 0; } - 如果你调小了进度条高度（比如设
height: 8px），但没同步改@keyframes里的$progress-height，就会出现边缘发虚、两段重叠、到头突然回弹 - 稳妥做法：保持默认
$progress-height（Bootstrap 5 是1rem），或手动把 keyframes 里所有$progress-height替换为实际像素值（如8px）
只改速度，却忘了补 animation？动态条纹会静止
很多项目只覆盖了 background-image（比如换条纹颜色），但漏掉补 animation 声明。结果是条纹背景存在，但完全不动：
-
.progress-bar-striped只负责静态条纹 -
.progress-bar-animated才触发动画，它依赖两个条件：存在条纹背景 + 启用animation - 自定义样式里必须同时写：
background-image+animation: progress-bar-stripes ... - 别指望 JS 动态改
background-position：性能差，且无法与width动画同步
animation 声明漏写、以及 Safari 15.4 以下完全不支持该动画——需要 JS + transition: width 兜底。
