.progress-bar-striped 条纹不动是因为 Bootstrap 5+ 仅提供静态条纹背景，未默认启用动画；需同时定义 @keyframes progress-bar-stripes、为 .progress-bar-striped 设置 animation 属性，并确保 background-size 与位移值匹配。
为什么.progress-bar-striped加了类但条纹不动
因为 Bootstrap 5+ 默认只提供静态条纹背景（background-image 是 base64 或 linear-gradient），但没配 @keyframes 和 animation 声明。仅加 .progress-bar-striped 类，只是渲染出静止的斜线图，不是动画。
必须显式启用动画逻辑，且确保它不被原生样式覆盖：
-
.progress-bar-animated类是触发动画的开关，但它依赖 Bootstrap 自带的@keyframes progress-bar-stripes和animation规则 - 如果你用的是 CDN 或未开启 Sass 构建，Bootstrap 的 CSS 文件里可能根本没定义
@keyframes progress-bar-stripes（尤其某些精简版） - 检查 DevTools 中元素的
animation计算值：若显示none，说明动画声明压根没生效
怎么手动补全条纹动画（纯 CSS 方案）
最可靠的做法是自己写完整的动画规则，绕过 Bootstrap 是否内置的问题。关键三要素必须同时存在、名称一致、顺序正确：
- 重写
@keyframes progress-bar-stripes，并加!important确保覆盖（原生规则常无!important，但权重高） - 给
.progress-bar-striped显式设置animation，不能只靠.progress-bar-animated -
background-size必须与@keyframes中的background-position位移值单位、数值匹配（例如都用1rem）
示例（水平右向左滚动）：
@keyframes progress-bar-stripes {
0% { background-position: 1rem 0 !important; }
100% { background-position: 0 0 !important; }
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
animation: progress-bar-stripes 1s linear infinite;
}
加了动画但还是卡住或错位
常见原因不是代码漏写，而是方向和尺寸失配：
- 渐变方向（
linear-gradient(45deg, ...)）和@keyframes里的background-position轴向不一致：45° 斜线需 XY 同步位移；想垂直动，得改渐变为to bottom并把位移改成0 100%→0 0 -
background-size设为1rem 1rem，但进度条高度只有8px，条纹被垂直压缩，动画时出现模糊或撕裂——此时应同步缩为0.5rem 0.5rem - 父容器或自身有
overflow: hidden被意外取消（比如被其他组件样式覆盖），导致动画区域被裁掉 - 使用了
transform: scale()或zoom，会干扰background-position的像素计算，优先用height+background-size调整
想让条纹从左往右动，别改 keyframes
直接控制播放方向更安全，避免和原生关键帧冲突：
- 给元素加
animation-direction: reverse，而不是去改@keyframes里的坐标 - 写法：
.progress-bar-striped { animation-direction: reverse; }，注意它必须作用在已启用动画的元素上（即已有animation声明） - 别写成
animation: ... reverse—— Bootstrap 原生animation值不含reverse，这种写法会被浏览器忽略 - 如果仍无效，加
!important：animation-direction: reverse !important;
真正难调的从来不是“怎么动”，而是动得准不准、停不停顿、边缘有没有撕裂——这些全取决于 background-size、background-position 和 animation-duration 三者的数值耦合是否严丝合缝。
