直接改 animation 无效，因 bootstrap 5 的进度条动画由 @keyframes progress-bar-stripes 驱动且依赖 .progress-bar-animated 类触发，仅修改元素 animation 声明无法覆盖完整动画规则，必须重写 @keyframes 或调整 scss 变量 $progress-bar-animation-timing。
为什么直接改 animation 没用？
Bootstrap 5 的进度条（.progress-bar）默认使用 CSS 变量控制动画，且关键动画属性被写在 @keyframes 规则里，不是靠元素自身 animation 声明驱动的。你直接给 .progress-bar 加 animation: none 或重写 animation-duration，大概率无效——因为动画实际由父容器 .progress 的伪类触发，或依赖 JS 动态添加的 .progress-bar-animated 类。
真正起效的方式是覆盖 Bootstrap 的 @keyframes 定义，或替换掉它所依赖的 CSS 变量。
-
.progress-bar-animated类必须存在，否则动画根本不会启动 - Bootstrap 默认用的是
progress-bar-stripes+progress-bar-animated组合，仅加后者不生效 - 自定义动画前，先确认你用的是 Bootstrap 5+（4.x 用的是
progress-bar-striped active）
如何替换默认的条纹移动动画？
Bootstrap 5 把条纹动画抽成了 @keyframes progress-bar-stripes，默认每秒向左移动 100%。要改速度、方向或节奏，得重写这个 keyframes，并确保它在 Bootstrap 样式之后加载（比如放在自定义 CSS 文件末尾）。
@keyframes progress-bar-stripes {
0% {
background-position-x: 1rem;
}
100% {
background-position-x: 0;
}
}
上面这段把动画从「每秒走完 100%」改成「每秒走 1rem」，视觉上明显变慢。你也可以：
- 把
1rem换成2rem加快条纹流动 - 把
background-position-x改成background-position-y让条纹上下动 - 加多段
0%, 50%, 100%控制缓动效果（如ease-in-out）
怎么禁用动画但保留条纹样式？
有时候你只要静态条纹背景，不要动效。这时候别删 .progress-bar-animated 类——那会连条纹都消失。正确做法是让动画“不动”：
.progress-bar-animated {
animation: none !important;
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
注意两点：
-
animation: none !important必须带!important，否则被 Bootstrap 的animation声明覆盖 - 单独保留
.progress-bar-striped的background-image，确保条纹还在
用 CSS 变量批量控制所有进度条动画？
Bootstrap 5 引入了 --bs-progress-animation-timing 和 --bs-progress-height 等变量，但动画时长其实没暴露成变量——它硬编码在 @keyframes 里。所以没法只改一个变量就调速。不过你可以用 CSS 变量统一管理条纹角度、颜色、间距，方便主题切换：
:root {
--bs-progress-striped-angle: 45deg;
--bs-progress-striped-color: rgba(255, 255, 255, 0.15);
}
.progress-bar-striped {
background-image: linear-gradient(
var(--bs-progress-striped-angle),
var(--bs-progress-striped-color) 25%,
transparent 25%,
transparent 50%,
var(--bs-progress-striped-color) 50%,
var(--bs-progress-striped-color) 75%,
transparent 75%,
transparent
);
}
这种写法的好处是：后续换主题时，只改 :root 里的两个变量，所有进度条条纹自动更新。但动画速度仍需手动改 @keyframes。
真正容易被忽略的是：如果你用 Sass 编译 Bootstrap，应该在 $enable-progress-bar-animation: true 开启前提下，通过 @function 或 @mixin 替换 keyframes，而不是靠后加载 CSS 覆盖——后者在构建流程里容易被 PurgeCSS 清掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
