直接改@keyframes progress-bar-stripes无效是因为bootstrap 4原始动画优先级更高或新规则未被调用，需确保名字一致、加载顺序在bootstrap后、无同名干扰，且须重写.animation声明而非仅改duration。
直接改@keyframes progress-bar-stripes无效？优先级和加载顺序是关键
你写了新的@keyframes progress-bar-stripes并把时长改成0.5s，但条纹还是按 1 秒滚动——不是浏览器没加载，而是 Bootstrap 4 的原始动画规则优先级更高，或者你的新规则没被实际调用。
Bootstrap 4 的 .progress-bar-animated 类里写的是：animation: progress-bar-stripes 1s linear infinite，这个 1s 是硬编码值（不是 SCSS 变量），但它仍可能被后续同名 @keyframes 覆盖——前提是你的新规则必须：
- 名字完全一致：
@keyframes progress-bar-stripes（不能拼错、不能加空格） - 放在 Bootstrap CSS 文件之后加载（比如在自定义 CSS 最末尾，或
<style></style>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
