直接改@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></style>标签放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
