要修改 bootstrap 5 条纹进度条动画速度，必须重写同名 @keyframes progress-bar-stripes 并同步更新 .progress-bar-animated 的完整 animation 声明，且 background-position 位移需与 background-size 匹配，同时确保 .progress-bar-striped 和 .progress-bar-animated 共存。
直接改 animation-duration 没用，必须重写 @keyframes
Bootstrap 5 的条纹动画由 @keyframes progress-bar-stripes 驱动，不是靠元素自身的 animation 声明控制。你给 .progress-bar-animated 加 style="animation-duration: 0.5s" 或只覆盖 animation-duration CSS 属性，浏览器会忽略——它只认完整的 animation 声明。
真正起效的方式是：在自定义 CSS 中（确保加载顺序在 Bootstrap 之后），用同名 @keyframes progress-bar-stripes 覆盖原规则，并同步重写 .progress-bar-animated 的完整 animation 值。
- 务必加
!important在关键帧里（如background-position: 0 0 !important），否则原生规则仍可能生效 - 不要只改时长，
background-position的位移值必须和background-size匹配（比如background-size: 0.5rem 0.5rem，则位移也得是0.5rem） - SCSS 用户更推荐提前重定义变量：
$progress-bar-animation-timing: 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
.progress-bar-striped 和 .progress-bar-animated 必须同时存在
只加 .progress-bar-striped 是静态条纹；只加 .progress-bar-animated 不会触发动画——两者缺一不可。Bootstrap 5 的动画逻辑依赖这个组合类，删掉任一个都会失效。
常见翻车点：
- JS 动态增删类时误删了
.progress-bar-striped，只剩.progress-bar-animated→ 条纹消失，动画也不动 - 用 CSS 把
.progress-bar-striped的background-image设为none→ 条纹没了，但.progress-bar-animated还在徒劳尝试动画 - 自定义样式里写了
.progress-bar-animated { animation: none; }→ 动画停了，连条纹背景都可能被清掉（因某些浏览器会联动清除 background）
调速度、方向、平滑度，三者必须同步改
条纹动画的视觉效果由三个参数共同决定：background-size、@keyframes 中的 background-position 位移、animation-duration。改其中一项不调另外两项，大概率出现卡顿、撕裂、跳变或“不动”。
例如进度条高度是 8px：
- 把默认
background-size: 1rem 1rem改成0.4rem 0.4rem - 对应
@keyframes写成：0% { background-position: 0 0; } 100% { background-position: 0.4rem 0.4rem; } -
animation时长设为0.8s，缓动函数用cubic-bezier(0.34, 1.56, 0.64, 1)
垂直方向动画同理：渐变方向改 to bottom，@keyframes 改成 background-position: 0 100% → 0 0，background-size 保持 X Y 值一致（如 0.5rem 0.5rem）。
发光渐变等自定义效果别破坏 width 动态更新
Bootstrap 5 通过 JS 或内联 style="width: XX%" 控制进度，所有自定义样式必须兼容这个机制。常见冲突点：
- 用
background: linear-gradient()替换条纹时，别设background-size: 100% 100%→ 会拉伸变形，应固定尺寸（如200% 100%）并配合background-position动画 - 加发光伪元素（
::after）时，确认父容器.progress没有意外的overflow: hidden，否则光晕被裁掉 - 如果加了
transition: width .3s，发光层也要同步加transition，否则进度条“跑”了，光晕还停在原地
最易被忽略的是：动画重写后没验证窄屏（如手机）下条纹是否仍清晰。高度 ≤ 6px 时，background-size 若仍用 1rem，条纹会被压缩模糊，必须同比例缩小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
