直接改animation-duration无效，因Bootstrap的.animation是复合属性，浏览器不支持局部覆盖；必须重写完整animation声明或通过SCSS变量$progress-bar-animation-timing调整，且需同步匹配@keyframes位移值与background-size。
直接改 animation-duration 没反应，是因为 Bootstrap 的 .progress-bar-animated 使用复合 animation 声明，浏览器不支持“只改时长”这种局部覆盖。
为什么 style="animation-duration: 0.5s" 完全无效
浏览器把 animation 当成一个整体值处理。Bootstrap 原生规则是：animation: progress-bar-stripes 1s linear infinite。你只写 animation-duration，等于只提交了其中一格参数，浏览器直接忽略——它要么用整条原始声明，要么用你提供的完整新声明。
- DevTools 里看到的
animation计算值仍是1s linear infinite？说明你的覆盖没生效 - 别在元素上硬塞
style="animation-duration: 0.5s"，这行代码纯属摆设 - 想临时调试，唯一能强制生效的方式是：
animation: progress-bar-stripes 0.5s linear infinite !important
真正起效的两种路径：SCSS 变量 or 纯 CSS 覆盖
如果你控制项目构建流程（如 Vue CLI、Create React App 配了 Sass），优先走 SCSS 变量；如果只用 CDN 引入 bootstrap.min.css，就得手写 CSS 覆盖。
- SCSS 方式（推荐）：在
@import "bootstrap/scss/bootstrap"之前，重定义变量：$progress-bar-animation-timing: 0.6s linear infinite; - 纯 CSS 方式：必须同步做三件事——重写
@keyframes progress-bar-stripes（名字一字不差）、重写.progress-bar-animated的animation声明、确保background-size和@keyframes里的background-position数值单位一致（比如都用0.5rem，别混用px和rem） - 加载顺序关键：自定义 CSS 必须放在 Bootstrap CSS 之后，否则规则被覆盖
调快动画后条纹“拖影”或“回弹”，怎么修
条纹滚动本质是靠 background-position 在固定尺寸背景图上位移。速度一变，位移节奏就容易和背景图尺寸失配。
- Bootstrap 默认进度条高度是
1rem（≈16px），原@keyframes位移是from { background-position: 0 0; } to { background-position: 1rem 1rem; } - 如果你把进度条设成
height: 8px，但没同步改@keyframes里的位移值，就会出现边缘发虚、两段重叠、到头突然回弹 - 稳妥做法：要么保持默认高度，只调时长；要么手动把
@keyframes里所有1rem替换为8px，同时把background-size也改成8px 8px - 时长别低于
0.6s：人眼识别不到连续运动，会当成闪烁；也别设0s或0.1s：低端设备帧率跟不上，动画卡顿甚至跳
最易被忽略的是三处联动：位移值没随高度调整、animation 声明漏写、以及 Safari 15.4 以下完全不支持该动画——得用 JS + transition: width 兜底。
