Bootstrap原生不支持条纹+闪烁组合，因.progress-bar-animated仅控制background-position-x且无透明度动画；需自定义class与双@keyframes（位移+opacity）配合实现。
为什么 progress 原生样式不支持条纹+闪烁组合
Bootstrap 的 .progress-bar 默认只提供静态条纹（.progress-bar-striped）和动画条纹（.progress-bar-animated），但两者叠加时，.progress-bar-animated 会覆盖条纹的背景位置动画逻辑，导致条纹“动不起来”或闪烁失效。根本原因是 Bootstrap 5+ 中 .progress-bar-animated 使用的是 animation: progress-bar-stripes 1s linear infinite，而该动画只控制 background-position-x，未预留透明度/颜色切换空间。
手动覆盖 CSS 实现条纹 + 闪烁双效果
必须同时控制两个动画：一个驱动条纹位移，一个控制透明度周期变化。不能依赖 Bootstrap 内置的 .progress-bar-animated 类，需自定义 class 并重写 @keyframes。
- 给进度条添加自定义类，如
progress-bar-striped-pulse - 用
@keyframes定义两段独立动画：一段是stripes-move（位移条纹），一段是pulse-opacity（0.6 → 1 → 0.6 透明度循环） - 在 class 中用
animation同时声明两个动画，用逗号分隔，注意时长需错开（例如条纹 1s、闪烁 2s），避免同步卡顿 - 条纹背景必须用
linear-gradient显式定义，不能依赖 Bootstrap 的默认值（它在暗色模式下可能失效）
@keyframes stripes-move {
0% { background-position-x: 1rem; }
100% { background-position-x: 0; }
}
@keyframes pulse-opacity {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.progress-bar-striped-pulse {
background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
animation: stripes-move 1s linear infinite, pulse-opacity 2s ease-in-out infinite;
}
HTML 结构要注意 class 顺序和父容器
Bootstrap 进度条依赖嵌套结构：.progress → .progress-bar。如果漏掉外层 .progress，高度和圆角会丢失；如果把自定义 class 加在 .progress 上而非 .progress-bar，动画不会生效。
- 必须将
progress-bar-striped-pulse加在<div class="progress-bar"> 上 <li>保留 <code>.progress-bar-striped可选，但它只是设置初始背景图，实际动画由自定义 CSS 驱动，可删可留 - 若使用
aria-valuenow动态更新，确保 JS 修改的是.progress-bar的style.width，而不是靠data-属性触发
<div class="progress"> <div class="progress-bar progress-bar-striped-pulse" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div>
移动端和深色模式下的兼容性坑
iOS Safari 对多 animation 声明的支持较弱，尤其当两个动画时长为整数倍关系时（如 1s 和 2s），可能出现闪烁跳帧。深色模式下，Bootstrap 的 rgba(255,255,255,.15) 条纹会过淡甚至不可见。
- 在 iOS 上，把闪烁动画时长改为质数（如
1.7s），能显著减少卡顿 - 深色模式建议改用
hsl()背景色，例如hsl(210, 10%, 70%)替代白色透明条纹，保证对比度 - 加
will-change: opacity, background-position;提升动画层性能，但仅在高频率更新时启用（避免过度触发合成）
真正难的不是写出来，而是让条纹位移和透明度变化在不同设备上节奏一致——稍有偏差，用户就会觉得“闪得不舒服”。这需要反复在真机上测 iOS、Android 和 Windows Edge 的渲染帧率。
