Bootstrap进度条动画条纹怎么让它动起来-Bootstrap教程-PHP中文网

.progress-bar-striped 条纹不动是因为 Bootstrap 5+ 仅提供静态条纹背景，未默认启用动画；需同时定义 @keyframes progress-bar-stripes、为 .progress-bar-striped 设置 animation 属性，并确保 background-size 与位移值匹配。

bootstrap进度条动画条纹怎么让它动起来

为什么.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）

示例（水平右向左滚动）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

@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;