CSS如何实现Bootstrap进度条自定义动画_利用keyframe关键帧

Bootstrap进度条默认动画不动，因其5+版本禁用animation仅保留transition；需手动添加linear-gradient背景与progress-bar-stripes关键帧动画，并确保选择器权重足够、height明确及overflow:hidden未被覆盖。Bootstrap进度条默认动画为什么不动？因为 Bootstrap 5+ 默认禁用了进度条的 animation，只保留了 transition（颜色/宽度渐变），不是循环加载效果。你看到的"不动"，其实是它压根没开关键帧动画------.progress-bar 类里连 @keyframes 都没定义，更别说 animation 属性了。常见错误现象：progress-bar-striped 加上了，但条纹不流动；或者自己写了 @keyframes 却没生效，因为被 Bootstrap 的 CSS 优先级盖掉了。必须显式给 .progress-bar 添加 animation 声明（不能只靠类名）Bootstrap 的 .progress-bar-striped 仅提供背景图，不带动画逻辑若用 Sass 编译，要确认是否启用了 $enable-progress-bar-animation: true（但该变量在 Bootstrap 5.3+ 已被移除，实际无效）怎么用 @keyframes 实现条纹滚动动画核心是覆盖 Bootstrap 的条纹背景，并用 background-position 驱动位移。不能直接改 background-image 的 base64，而要用可动画的线性渐变 + animation 控制偏移。使用场景：需要横向流动的斜纹、加载中状态提示、或和品牌色统一的定制动效。立即学习"前端免费学习笔记（深入）"；用 linear-gradient 替代原生条纹背景图，例如：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关键帧只需两帧：@keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 1rem 1rem; } }注意：如果进度条高度小于 1rem，条纹会错位，建议按比例缩放 background-size 和 animation 位移值为什么加了 animation 还是不流动？优先级和选择器问题Bootstrap 的 CSS 文件通常在你的自定义样式之前加载，导致你的 animation 被覆盖；另外，.progress-bar 默认没有 display: block 或固定宽高，也可能让动画"不可见"。 Trenz AI驱动的社交电商营销平台，专为TikTok Shop设计