必须同步修改@keyframes位移值、animation声明和background-size三者，否则条纹会不动或撕裂；纯CSS覆盖需重写整套动画规则并确保加载顺序在Bootstrap之后，SCSS用户应优先重定义变量。
直接改 animation-duration 行内样式或只覆盖单个 CSS 属性无效，必须同步处理 @keyframes、animation 声明和 background-size 三者，否则条纹要么不动、要么撕裂跳变。
怎么用纯 CSS 覆盖动画速度（CDN / 编译版 Bootstrap）
你没用 SCSS 构建流程？那就得手动重写整套动画规则，且必须确保加载顺序在 Bootstrap CSS 之后。
- 复制原始
@keyframes progress-bar-stripes定义（从 DevTools 的 Computed 面板里扒，或查 Bootstrap 源码），修改其中from/to的位移值和时长 - 在自定义 CSS 文件末尾或
<style>标签中重写：.progress-bar-animated { animation: progress-bar-stripes 0.6s linear infinite; } - 必须加
!important吗？不一定，但若原生规则优先级高（比如用了.progress-bar-animated+ 其他父类组合），就得用更高权重选择器或!important强制覆盖 - 别只改
@keyframes名字拼错、漏掉单位、或把1rem写成16px—— 浏览器会当两个不同动画，原动画照常跑
为什么改了 animation-duration 还是 1 秒？
因为 .progress-bar-animated 的 animation 是复合属性，浏览器不支持局部覆盖。你写 style="animation-duration: 0.5s"，它根本不会生效。
- DevTools 里看到的计算值仍是
1s linear infinite？说明你的覆盖没命中 - 检查是否漏写了
linear infinite—— 少了infinite动画播完就停；少了linear可能回退到浏览器默认缓动 - 动态 JS 修改
element.style.animation也危险：字符串拼错一个空格，整个动画就失效
改快后条纹“拖影”或“突然回弹”怎么办？
本质是 background-position 位移距离和 background-size 不匹配，尤其当你调小了进度条高度（比如设 height: 8px）却没同步更新动画参数。
- 默认进度条高度是
1rem（≈16px），原@keyframes位移是1rem 0→0 0；若高度缩为8px，位移也得改成8px 0→0 0 -
background-size必须和位移单位一致：都用px或都用rem，混用会导致计算失准、边缘模糊 - 时长别低于
0.6s：人眼识别不到连续运动，会当成闪烁；别设0s或0.1s：低端设备帧率跟不上，动画卡顿甚至跳帧
SCSS 用户该怎么做才最稳？
如果你控制构建流程（Vue CLI、Create React App 配了 Sass），直接重定义变量，一劳永逸，无冲突风险。
- Bootstrap 5.3+ 用
$progress-bar-animation-timing: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;，再@import "bootstrap/scss/bootstrap"; - Bootstrap 4.x 对应变量名是
$progress-bar-striped-animation-timing - 别在
@import之后再改变量——晚了，Bootstrap 已经编译完了 - 改完记得重新构建，热更新有时不会触发 SCSS 变量重编译
最容易被忽略的不是“怎么改速度”，而是改完后没验证 background-size 和 @keyframes 里的位移是否仍匹配当前进度条实际高度，以及 Safari 15.4 以下完全不支持这个动画——得靠 JS 控制 width 过渡兜底。
