应修改 SCSS 变量 $progress-bar-animation-timing（如设为 0.6s linear infinite）并在导入 Bootstrap 前重定义；若仅用编译后 CSS，则需重写 @keyframes progress-bar-stripes 并确保高优先级。
怎么改 progress-bar-animated 的滚动速度
bootstrap 默认的条纹动画是用 css @keyframes 实现的，速度由 scss 变量 $progress-bar-animation-timing 控制，默认值是 1s linear infinite。直接改这个变量就能调快或调慢——但必须在编译前改，不能靠覆盖 css 动画名或重写 @keyframes 来“后发制人”，否则会被 bootstrap 原生规则覆盖。
- 如果你用的是源码（如 Start Bootstrap 或自己引入
bootstrap/scss），在自定义 SCSS 文件里提前重定义变量：$progress-bar-animation-timing: 0.6s linear infinite;
再@import "bootstrap/scss/bootstrap"，这样才生效 - 如果只用 CDN 或已编译的
bootstrap.min.css，没法改变量，只能手动覆盖动画本身：重写@keyframes progress-bar-stripes并确保它在 Bootstrap 样式之后加载，且不被 CSS 优先级压制 - 注意：动画时间改太短（比如
0.2s）会导致视觉闪烁；改太长（比如3s）会让条纹看起来像卡顿，实际体验反而更差
为什么不能只改 animation-duration 行内样式
因为 .progress-bar-animated 的动画依赖两个东西：一是类名触发的 animation 声明，二是底层 @keyframes progress-bar-stripes 的背景位移逻辑。只给元素加 style="animation-duration: 0.4s" 是无效的——Bootstrap 的 CSS 规则里 animation 是完整声明（含 timing function 和 iteration），行内样式无法局部覆盖其中某一项。
- 验证方法：打开 DevTools，选中进度条元素，看
animation计算值是否真的变了；大概率还是显示1s linear infinite - 真正起效的方式只有两种：重定义 SCSS 变量（推荐），或整段重写
@keyframes+ 对应的animation声明 - 别试图用 JS 动态改
element.style.animation，它会把整个 animation 字符串替掉，容易丢掉linear或infinite，导致动画播完就停
条纹动画变快后常见的视觉问题
速度调快不等于体验更好。条纹滚动本质是靠背景图位移制造运动感，而 Bootstrap 的实现是用 background-size 和 background-position 配合完成的，一旦动画帧率或位移节奏失配，就会出现“拖影”或“跳变”。
- 典型现象：条纹边缘发虚、出现两段重叠的斜线、滚动到头时突然回弹（因
from/to位移没对齐） - 根本原因：原 keyframes 定义里
from { background-position: $progress-height 0; }，这里的$progress-height是变量，如果你改了进度条高度但没同步更新 keyframes，位移距离就跟背景图尺寸不匹配 - 稳妥做法：保持
$progress-height不变，或同步调整 keyframes 中的数值（比如你设$progress-height: 12px，那就要把 from/to 的$progress-height换成12px）
$progress-bar-animation-timing，其他方式都容易漏掉一环。
