直接改 animation-duration 无效，因为 .progress-bar-animated 使用复合 animation 属性，需完整重写 animation 声明或通过 SCSS 变量、!important、三要素同步覆盖（@keyframes、animation 属性、background-size/position 匹配）才能生效。
直接改 animation-duration 为什么没反应
因为 .progress-bar-animated 的动画声明是复合属性：animation: progress-bar-stripes 1s linear infinite，只改 animation-duration 行内样式或局部 CSS 属性无法覆盖整条规则。浏览器不支持“部分重写” animation，它要么用原始声明，要么被完整的新声明替代。
- DevTools 里看到的计算值仍是
1s linear infinite？说明你的覆盖没生效 - 别在元素上写
style="animation-duration: 0.5s"——这行完全无效 - 想临时调试，可用
!important强制重写整个 animation：animation: progress-bar-stripes 0.5s linear infinite !important
用纯 CSS 覆盖动画必须同步三处
如果你用的是 CDN 或已编译的 bootstrap.min.css，只能靠后加载的自定义 CSS 覆盖。但光改 @keyframes 不够，必须三者一致：
- 重写
@keyframes progress-bar-stripes，确保名字完全相同、且放在你自己的 CSS 文件末尾（或<style>标签中） - 重写
.progress-bar-animated的animation声明，时长、函数、循环数全部显式写出 - 检查
background-size和@keyframes中的background-position位移值单位、数值是否匹配（比如都用0.5rem，而非一个px一个rem）
SCSS 用户优先改变量 $progress-bar-animation-timing
这是最干净、无冲突的方式，适用于你控制构建流程的项目（如 Vue CLI、Create React App 配了 Sass）：
- 在导入 Bootstrap 之前，先重定义变量：
$progress-bar-animation-timing: 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; - 再
@import "bootstrap/scss/bootstrap"; - 不用写任何
@keyframes或选择器，所有.progress-bar-animated自动生效 - 注意：这个变量在 Bootstrap 5.3+ 中仍有效，但旧版（如 4.x）对应变量名是
$progress-bar-striped-animation-timing
调快动画后容易出现“拖影”或“跳变”
速度不是越快越好。条纹滚动本质是背景图位移，background-position 从起点到终点的距离，必须和 background-size 形成整数倍关系，否则视觉上会撕裂、回弹或模糊：
- 进度条高度是
8px？把默认1rem（≈16px）缩为0.5rem，并同步改@keyframes中的位移：from { background-position: 0 0; } to { background-position: 0.5rem 0.5rem; } - 时长别低于
0.6s：人眼识别不到连续运动，会当成闪烁 - 别设
0s或极小值（如0.1s）：低端设备渲染帧率跟不上，动画卡顿甚至跳变 - Safari 15.4 以下完全不支持该动画——得用 JS +
transition: width兜底，不能只依赖 CSS 条纹
