直接改@keyframes progress-bar-stripes无效，因Bootstrap原始规则优先级更高；须在SCSS中重定义$progress-bar-animation-timing变量，或用纯CSS确保新@keyframes同名、同名调用且加载顺序在Bootstrap之后。
直接改 @keyframes progress-bar-stripes 无效？原因在这里
你写了新的 @keyframes progress-bar-stripes 并把 animation-duration 改成 0.4s，但条纹还是按 1 秒滚动——这不是浏览器没加载 CSS，而是 Bootstrap 的原始 @keyframes 规则优先级更高，或者你的新规则没覆盖到实际被调用的动画名。
关键点：Bootstrap 的 .progress-bar-animated 类里写的不是 animation: progress-bar-stripes 1s，而是完整声明 animation: progress-bar-stripes $progress-bar-animation-timing，而 $progress-bar-animation-timing 是一个 SCSS 变量，默认值为 1s linear infinite。CSS 文件里根本不会出现裸露的 1s 字符串，所以你靠文本搜索找“1s”去替换，注定失败。
真正生效的路径只有两条：
① 用 SCSS 源码编译，在导入 Bootstrap 前重定义变量；
② 用纯 CSS 覆盖，但必须确保新 @keyframes 名字和动画声明完全一致，且加载顺序在 Bootstrap 之后。
.progress-bar-animated 的动画为什么不能用行内样式调速
给元素加 style="animation-duration: 0.5s" 完全没反应，是因为 CSS 的 animation 是一个复合属性，浏览器不支持“局部覆盖”。Bootstrap 的规则里写的是：
立即学习“前端免费学习笔记（深入）”；
.progress-bar-animated {
animation: progress-bar-stripes 1s linear infinite;
}
而行内样式只提供 animation-duration，它无法覆盖整个 animation 声明，最终仍走原规则。
可行的绕过方式（不推荐）：
- 用
!important强制重写整个animation声明：animation: progress-bar-stripes 0.5s linear infinite !important - 但这样会丢失原本的
cubic-bezier或其他 timing function，且容易和 JS 动态类冲突 - 更稳妥的做法是：在自定义 CSS 中，用更高权重的选择器重写整个
.progress-bar-animated的animation值
纯 CSS 覆盖 @keyframes 的实操要点
如果你只能用已编译的 bootstrap.min.css（比如通过 CDN 引入），那就必须手写 @keyframes 并确保它生效。这不是“改 duration”那么简单，而是整套联动：
- 先复制 Bootstrap 原始的
@keyframes progress-bar-stripes定义（从源码或 devtools 的 computed 面板里扒） - 把新规则写在你自己的 CSS 文件末尾，或用
<style>标签放在</body>前 - 动画名必须一字不差：仍是
progress-bar-stripes，不能加后缀或改名 - 关键帧里的位移值要匹配当前
$progress-height：如果进度条高度是16px，那from的background-position应该是16px 0，否则条纹会错位、跳变或发虚 - 别漏掉
to帧——很多开发者只改from，结果动画播完就卡住
改太快反而出问题：视觉失真背后的原理
把 animation-duration 从 1s 改成 0.2s，条纹确实“快了”，但你可能立刻看到边缘模糊、两段斜线重叠、滚动到头突然回弹——这不是 bug，是背景图位移节奏和容器尺寸失配的必然结果。
根本原因是：Bootstrap 的条纹动画依赖 background-size: <code>$progress-height $progress-height 和 background-position 的同步变化。一旦动画时间压缩太多，浏览器在单位时间内需要完成更多像素级位移，而渲染帧率跟不上，就会采样丢帧。
经验阈值：
- 低于
0.4s：多数设备开始出现拖影或闪烁 - 高于
1.5s：人眼感知为“卡顿”而非“缓慢”，因为条纹移动节奏脱离了自然运动预期 - 最稳妥区间是
0.6s – 0.9s，兼顾响应感与视觉稳定性
真正影响体验的，从来不是数字本身，而是背景图尺寸、容器高度、设备刷新率三者是否对齐。改速度前，先确认 .progress-bar 的实际高度没被其他 CSS 意外撑开或压缩。
