Bootstrap进度条动画纯CSS实现，需按版本正确搭配类名并确保父容器overflow生效；动画速度通过animation-duration调整，宽度值须限制在0–100%内，旧版Safari及IE需JS降级方案。
Bootstrap 进度条动画不是靠 JavaScript 驱动的，而是纯 CSS 实现的 —— 所以你改不了 animation-duration 以外的任何“逻辑”，也别试图用 JS 控制帧率。
为什么加了 .progress-bar-animated 没反应？
常见错误是：只加了类，但没配对使用 .progress-bar-striped（Bootstrap 4）或漏了父容器 .progress（Bootstrap 5 要求更严格）。
- Bootstrap 4：必须同时存在
.progress-bar+.progress-bar-striped+.progress-bar-animated，三者缺一不可 - Bootstrap 5：
.progress-bar-animated已独立支持，但父级.progress的overflow: hidden必须生效，否则动画会溢出 - 检查浏览器控制台是否报错
Failed to execute 'animate' on 'Element'—— 那说明你误用了 JS 动画 API 去操作它，纯属多余
.progress-bar-animated 的速度怎么调？
它底层用的是 CSS @keyframes progress-bar-stripes，动画时长由 animation-duration 决定，默认是 1s（Bootstrap 4）或 0.6s（Bootstrap 5）。不能通过 HTML 属性改，只能覆盖 CSS：
.progress-bar-animated {
animation-duration: 0.3s;
}注意：值越小动画越快，但低于 0.15s 在低端设备上可能卡顿或直接跳变；也不建议设成 0s，那会退化为无动画的瞬时填充。
服务端返回进度 102%，前端动画崩了怎么办？
Bootstrap 进度条不校验 width 值范围，传入 style="width: 102%" 会导致条纹动画错位、甚至 DOM 溢出容器边界。
- 务必在 JS 更新前做截断：
Math.min(100, Math.max(0, serverValue)) - 如果后端返回的是小数（如
0.78），别直接拼进style，要转成百分比字符串：${value * 100}% - 用
aria-valuenow同步真实值，但style.width只接受 0–100% 区间
最易被忽略的一点：动画效果在 Safari 15.4 以下和所有 IE 版本中完全失效，且无降级提示 —— 如果项目还要兼容这些环境，得用 JS + transition: width 方案兜底，而不是依赖 .progress-bar-animated 类。
