需重写@keyframes并用更高优先级CSS覆盖，同步调整background-size与background-position位移量，且动画名不可复用progress-bar-stripes，须加!important确保生效。
如何覆盖 Bootstrap 5 条纹进度条的 background-image 动画？
Bootstrap 5 的条纹进度条（.progress-bar-striped）默认用 CSS 线性渐变 + animation 实现流动效果，但它的动画是写死在 @keyframes progress-bar-stripes 里的，且背景图尺寸和位移由 background-size 和 background-position 联动控制。直接改 animation-duration 或 background-size 很容易失效——因为 Bootstrap 的关键帧动画会强制重置 background-position。
真正可控的方式是：**完全重写该 keyframes，并用更高优先级的 CSS 覆盖原有规则**。
- 必须用
!important覆盖 Bootstrap 的background-position声明（它在 keyframes 中带!important） - 自定义动画名不能叫
progress-bar-stripes，否则会被 Bootstrap 的同名规则覆盖（即使你后写） -
background-size推荐设为1rem 1rem或24px 24px，太小会导致条纹糊成一片，太大则流动感弱
怎样让条纹流动变慢或变快？
修改动画时长不能只调 animation-duration，还要同步调整 @keyframes 中的 background-position 位移量，否则条纹会“跳变”或卡住。比如原生 Bootstrap 是 background-position: 1rem 0 → 0 0，对应 1 秒循环；你想拉长到 3 秒，就得把位移改成 3rem 0 → 0 0，并配 animation-duration: 3s，才能保持匀速流动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义新动画名，如
@keyframes my-progress-stripes - 起始帧设
background-position: 1.5rem 0，结束帧设0 0（数值越大，条纹越宽、流动越“沉稳”） - 在进度条上用
animation: my-progress-stripes 2.5s linear infinite - 务必加
background-size: 1.5rem 1.5rem，与位移值匹配
为什么加了自定义样式却没生效？
常见原因不是选择器不够强，而是加载顺序或 specificity 不够。Bootstrap 5 的 CSS 文件里，.progress-bar-striped 的样式通常在 .progress-bar 之后定义，而 keyframes 是全局作用域，不看顺序。所以问题多出在两处：
- 你的自定义 CSS 文件在 Bootstrap CSS 之前引入 → keyframes 被覆盖，动画名无效
- 你只写了
.progress-bar-striped规则，但没覆盖.progress-bar-striped.animated（Bootstrap 5 默认启用动画需加此 class） - 浏览器 DevTools 里看到
background-image显示为linear-gradient(...)，但animation字段是none→ 说明 class 没正确应用，或被其他 CSS 重置
验证方式：在 DevTools 中检查元素，确认最终计算出的 animation 值是否为你定义的动画名，且 background-position 没被标记为 invalid。
移动端 Safari 上条纹动画卡顿怎么办？
iOS Safari 对 background-position 动画优化较差，尤其在低性能设备上容易掉帧。别硬扛，换方案：
- 用
transform: translateX()驱动一个伪元素（::before）来模拟条纹流动，性能更好 - 或者降级：对
prefers-reduced-motion: reduce用户停用动画，加@media (prefers-reduced-motion: reduce) { animation: none; } - 避免在
.progress-bar上同时用transition（如 width 变化）+ 条纹动画，两者叠加易触发重排
条纹动画本质是视觉糖，真要兼顾性能和兼容性，最稳妥的做法是：只在桌面 Chrome/Firefox 上启用自定义速度，Safari 和旧 Edge 退回 Bootstrap 默认节奏——毕竟用户根本不会盯着进度条数帧率。
