条纹动画方向卡住需同步修改@keyframes和background-image：渐变方向（如to bottom）必须与background-position轴向一致，垂直动画用0 100%→0 0，且加!important覆盖原生规则。
条纹动画方向卡住不动？改@keyframes和background-image必须同步
bootstrap 的条纹动画方向不随 linear-gradient 方向自动变，因为动画靠 @keyframes animate-progress 位移驱动，而默认只动 x 轴。你把渐变写成 to bottom，但关键帧还是 background-position: 1rem 0, 0 0，条纹就“挂”在那儿了。
实操要点：
- 必须重写
@keyframes animate-progress，且用!important覆盖原生规则（Bootstrap 5.3+ 仍存在优先级冲突） - 渐变方向（如
to bottom）和关键帧里的background-position轴向必须一致：竖向动画就用0 100%→0 0这类垂直位移 -
background-size保持原值（如1rem 1rem），否则条纹宽高比例错乱，滚动会拉伸或断裂
怎么写垂直向上滚动的条纹动画？
目标是条纹从下往上“涌”，不是旋转容器——这是真·方向变更，不是视觉欺骗。
示例代码（直接覆盖）：
@keyframes animate-progress {
0% { background-position: 0 100%, 0 0 !important; }
100% { background-position: 0 0, 0 -100% !important; }
}
.progress-bar-striped {
background-image: linear-gradient(to bottom, 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;
}
注意：to bottom + background-position 纵向变化，才是有效组合。别漏掉 !important，否则原生 keyframes 仍会生效。
想让条纹从右往左动？别碰@keyframes，换animation-direction
Bootstrap 默认条纹是从右往左扫（to right 渐变 + X 轴负向位移），如果要反向——比如从左往右动，不用改关键帧，直接控制播放方向更安全。
做法：
- 给
.progress-bar-animated加animation-direction: reverse - 确保它加载顺序在 Bootstrap CSS 之后，且优先级足够（必要时加
!important） - 不要同时改
@keyframes和animation-direction，容易互相抵消
错误示范：animation: progress-bar-stripes 1s linear infinite reverse —— Bootstrap 原生规则里没定义 reverse，这行会被忽略。
用transform: rotate()绕过动画重写？小心可访问性和响应式
如果只是临时让水平条纹“看起来”垂直，可以对 .progress-bar 单独加 transform: rotate(90deg)，但这是障眼法，不是真改方向。
隐患明显：
-
.progress的height变成逻辑宽度，得手动调尺寸，否则条纹被裁剪 - 里面文字也跟着转，得额外加
transform: rotate(-90deg)扳正，但语义上仍是横排文本 - 横屏/竖屏切换时，
rotate不会自适应，需要 JS 监听并重算，成本远高于直接改 keyframes -
aria-valuenow和屏幕阅读器看到的仍是原始方向，无障碍支持断裂
真正需要垂直动画的场景，别省这一步——老老实实改 @keyframes 和 background-image，否则后续维护和适配会反复踩坑。
