background-image的线性渐变方向不能单独控制条纹动画走向，因为动画由@keyframes中background-position位移决定；须同步修改渐变方向（如to bottom）和关键帧的background-position轴向（如垂直方向），否则条纹会卡住。
为什么 background-image 的线性渐变方向不能直接控制条纹动画走向
Bootstrap 5 的条纹进度条（.progress-bar-striped）本质是用 background-image: linear-gradient(...) 配合 background-size 和 animation 实现的。但它的默认动画（animate-progress）只在 X 轴平移 background-position，所以无论你把渐变写成 to right 还是 to bottom，动画始终是水平扫过——因为动画本身没改方向。
覆盖 @keyframes animate-progress 并重定义 background-position
要让条纹垂直动，必须同时改两处：渐变方向 + 关键帧位移方向。否则渐变是竖的，但位移还是横的，条纹就“卡住”不动了。
实操建议：
- 用
!important覆盖 Bootstrap 原生@keyframes animate-progress，否则它会优先生效 - 渐变方向设为
to bottom或to top，对应背景位移就该用background-position: 0 0, 0 100%→0 100%, 0 0 - 确保
.progress-bar-striped的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(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;
}
用 transform: rotate() 临时绕过动画重写（仅限视觉旋转）
如果只是想让水平条纹“看起来”是垂直动，且容器允许旋转，可以对 .progress-bar 单独加 transform: rotate(90deg)，再微调父容器尺寸和 overflow。
但要注意：
- 旋转后整个进度条宽高互换，
.progress的height变成逻辑上的“宽度”，需手动调整 - 文字标签（如有）也会跟着转，得额外用
transform: rotate(-90deg)扳回来 - 无法响应式自适应——比如横屏变竖屏时，旋转逻辑会失效
- 这不是真·垂直动画，只是视觉欺骗，
aria-valuenow等语义不变
条纹方向与语义、可访问性的隐含冲突
横向进度条符合绝大多数用户对“完成度从左到右增长”的直觉；强行垂直后，屏幕阅读器仍按 DOM 顺序播报，但视觉流向割裂，可能误导认知障碍用户。
更关键的是：.progress-bar 默认是 inline-block，旋转后容易触发 layout shift，尤其在 SSR 或 hydration 前后。如果非用垂直条纹，建议：
- 保留原生横向结构，仅用伪元素或绝对定位的装饰层模拟垂直条纹
- 避免在
prefers-reduced-motion: reduce环境下启用该动画，需加@media (prefers-reduced-motion: reduce)降级 - 测试真实设备上的 touch 拖拽反馈——有些浏览器对 rotated 元素的 pointer events 处理不一致
真正需要垂直动画的场景极少，多数时候是设计稿没区分「装饰性条纹」和「功能性进度指示」。先确认是否必须动条纹，而不是动整个进度条容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
