最安全直接的改法是给.progress-bar-animated设置animation-direction: reverse，需确保CSS加载在Bootstrap之后并加!important；勿重写@keyframes或误用.transform。
animation-direction: reverse 是最安全、最直接的改法，不用动 @keyframes，也不用碰 background-position 轴向。
Bootstrap 默认条纹是从右往左扫（视觉上是“向左滚动”），要让它从左往右动，别重写关键帧——改播放方向就行。
为什么不用重写 @keyframes？
重写 @keyframes animate-progress 容易和原生规则冲突，尤其 Bootstrap 5.3+ 仍存在优先级问题；而 animation-direction 是标准 CSS 层叠属性，覆盖成本低、语义清晰、兼容性好。
- 原生动画名是
progress-bar-stripes（不是animate-progress，后者是旧版或误传） -
.progress-bar-striped类本身不带animation，真正触发动画的是.progress-bar-animated - 所以必须对
.progress-bar-animated应用animation-direction: reverse
animation-direction: reverse 怎么写才生效？
必须确保你的 CSS 规则加载在 Bootstrap 样式之后，否则会被覆盖。推荐写法：
.progress-bar-animated {
animation-direction: reverse !important;
}
- 加
!important是因为 Bootstrap 原生声明里没设animation-direction，但浏览器默认为normal，且部分版本会内联或高优先级渲染 - 不要只写
.progress-bar-striped—— 它不负责动画启动，加了也没用 - 如果用了 SCSS，也可以在变量层改：
$progress-bar-animation-direction: reverse（需确认你用的是支持该变量的 Bootstrap 版本）
常见错误：条纹不动 or 反向后边缘撕裂
这通常不是方向问题，而是动画节奏和背景尺寸失配：
- 改了
animation-direction但漏了animation声明本身 → 条纹静止（检查是否还保留animation: progress-bar-stripes 1s linear infinite） - 进度条高度被设为
8px，但background-size还是默认1rem 1rem→ 条纹被垂直压缩，反向滚动时出现模糊或断层 - 用了
transform: scaleX(-1)之类 hack → 破坏可访问性（aria-valuenow逻辑不变，但视觉左右颠倒，屏幕阅读器无法感知）
真要反向滚动，就老老实实走 animation-direction: reverse 这条路。其他绕行方案（比如 rotate、scaleX、重写 keyframes）要么破坏语义，要么引入新 bug，还容易在响应式场景下失效。
