bootstrap的.progress-bar-striped不动，因其仅提供静态base64条纹背景图，未定义@keyframes和animation；需用linear-gradient替代并显式添加animation声明，同时确保选择器权重足够、height明确、overflow:hidden未被覆盖。
为什么 Bootstrap 的 .progress-bar-striped 不动？
因为 Bootstrap 5+ 默认禁用了条纹动画逻辑——.progress-bar-striped 只提供静态的 background-image（通常是 base64 编码的斜线图），但没配 @keyframes，也没写 animation 属性。你加了类，条纹还是“钉死”的。
常见错误现象：.progress-bar-striped 显示了条纹，但不流动；自己写了 @keyframes 却没生效；或者条纹流动但错位、抖动、只在部分浏览器可见。
- 必须显式给进度条元素添加
animation声明，不能只靠类名 - Bootstrap 的 CSS 通常在你的样式表之前加载，所以你的
animation很可能被覆盖，需提高选择器权重（例如用.progress .progress-bar.animated） -
.progress-bar默认是display: block，但若父容器或自身设置了overflow: hidden被意外覆盖，动画视觉会“消失”
如何用 @keyframes 实现真正无缝的条纹滚动？
核心不是改图片，而是用 linear-gradient 替代原生条纹背景，并通过 background-position 驱动位移。这样动画可精确控制、可缩放、无锯齿。
关键代码片段：
@keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 1rem 1rem; }
}
.progress-bar.animated {
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;
}
-
background-size和animation中的位移值（如1rem）必须匹配，否则条纹会跳变 - 如果进度条高度小于
1rem（比如height: 0.5rem），需等比缩小：设background-size: 0.5rem 0.5rem，animation里也用0.5rem - 不要用
transform或opacity动画来“模拟”条纹流动——那只是假动作，无法复现真实斜纹滚动感
怎样让自定义动画和 Bootstrap 原有逻辑共存？
Bootstrap 的 .progress-bar 默认只响应 width 和 transition，你加的 animation 是额外层。只要不破坏其基础渲染流，就能叠加生效。
- 确保
.progress-bar有明确的height（如height: 1rem），否则background-size会失准 - 避免在
.progress-bar上设置background-color覆盖掉你的渐变条纹；可用rgba(…, 0.8)保留透出效果 - 若使用 Sass 编译项目，别依赖
$enable-progress-bar-animation变量——它在 Bootstrap 5.3+ 已被移除，无效 - 移动端小屏下，可加媒体查询降级：比如
@media (max-width: 576px) { .progress-bar.animated { animation: none; } }
容易被忽略的性能与兼容性点
动画本身开销极小，但批量启用时仍有隐患：页面若有 20 个带 infinite 条纹动画的进度条，低端 Android 设备可能出现轻微掉帧；更隐蔽的问题是可访问性——屏幕阅读器不会感知这种纯装饰性动画，但若用户开启了系统“减少运动”偏好（prefers-reduced-motion），应主动关闭。
- 务必加媒体查询兜底：
@media (prefers-reduced-motion: reduce) { .progress-bar.animated { animation: none; } } - 不要给
.progress容器设overflow: hidden以外的裁剪方式（如clip-path），否则条纹动画边缘会被意外截断 - Firefox 对
background-position动画的支持略保守，建议始终用rem或px单位，避免%或em
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
