应同步调整background-size、@keyframes位移值与animation-duration，并改用cubic-bezier缓动函数；例如高度8px时设background-size: 0.5rem 0.5rem、位移0.5rem 0.5rem、时长1.2s、缓动cubic-bezier(0.34,1.56,0.64,1)。
修改 progress-bar-stripes 动画时长控制平滑度
条纹动画“卡顿”或“太急”，本质是 @keyframes progress-bar-stripes 的持续时间与位移节奏不匹配。bootstrap 5 默认用 1s，但这个值必须结合 background-size 和进度条实际高度来调——不是越小越“顺”，而是要让条纹视觉移动速度匹配人眼感知。
实操建议：
- 若进度条高度是
8px，把默认的1rem（约 16px）改成0.5rem，并同步改动画位移值：from { background-position: 0 0; } to { background-position: 0.5rem 0.5rem; } - 动画时长可微调为
1.2s或0.8s，但别低于0.6s，否则人眼会识别为“闪”而非“动” - 务必保持
background-size和@keyframes中的位移值单位、方向一致，否则条纹会拉伸、错位或突然跳变
用 animation-timing-function 替代默认 linear
默认 linear 是匀速，容易显得机械；换成 cubic-bezier(0.34, 1.56, 0.64, 1) 这类缓入缓出曲线，能显著提升视觉平滑感，尤其在进度缓慢推进时更自然。
常见错误现象：直接覆盖 .progress-bar-striped 的 animation 声明但漏掉 !important，导致原生样式仍生效。
正确写法示例：
.progress-bar-striped {
animation: progress-bar-stripes 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes progress-bar-stripes {
0% { background-position: 0 0; }
100% { background-position: 0.5rem 0.5rem; }
}
避免因 background-size 失配导致的“抖动”
条纹密度和动画平滑度强相关。如果 background-size 设为 1rem 1rem，但进度条高度只有 6px，条纹就会被垂直压缩、边缘模糊，动画过程中出现像素级撕裂感。
使用场景：小尺寸加载指示器（如按钮内嵌进度）、移动端窄条。
参数差异：
- 高度 ≤ 8px → 推荐
background-size: 0.4rem 0.4rem，animation位移同步改为0.4rem - 高度 ≥ 20px → 可用
0.8rem~1rem，但动画时长建议拉长到1.4s～1.6s，避免扫过太快 - 切勿混用单位（如
px和rem），CSS 计算会失准
过渡动画（width）与条纹动画（background-position）不同步怎么办
当 JS 动态更新 progress-bar 的 width 时，如果没设 transition，条纹动画本身再顺，整体进度变化仍是“突变”的——这是最常被忽略的平滑断点。
性能影响：给 .progress-bar 加 transition: width 0.4s ease 几乎无开销，但能掩盖动画启动延迟。
关键点：
- 必须加在
.progress-bar上，而不是.progress容器 - 不要用
all，只过渡width，防止干扰background-position动画 - 如果用了自定义颜色类（如
bg-success），确保该类不带覆盖transition的声明
条纹动画的平滑度从来不是单点调节，它卡在 background-size、@keyframes 位移值、animation-duration 和 width 过渡这四个变量的耦合上。少调一个，就可能让“顺滑”变成“抽搐”。
