CSS如何实现Bootstrap进度条自定义动画_利用keyframe关键帧-css教程-PHP中文网

Bootstrap进度条默认动画不动，因其5+版本禁用animation仅保留transition；需手动添加linear-gradient背景与progress-bar-stripes关键帧动画，并确保选择器权重足够、height明确及overflow:hidden未被覆盖。

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

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 或固定宽高，也可能让动画“不可见”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

性能影响：动画本身开销小，但若页面有大量进度条且都启用 infinite 动画，可能轻微增加渲染压力（尤其低端设备）。

必须提高选择器权重，比如写成 .progress .progress-bar.animated 或加 !important（不推荐，但临时调试可用）
确保 .progress-bar 有明确的 height（如 height: 0.5rem），否则 background-image 可能不渲染
检查浏览器 DevTools 的 Computed 标签页，确认 animation 是否被标记为 invalid（常见于 keyframes 名称拼错或未声明）
移动端 Safari 对 background-position 动画支持略差，建议加 -webkit-animation 前缀