看到2.0的答案,但它们似乎在3.0的工作方式不同.
我想在Bootstrap 3中反转进度条动画,所以它从左到右移动,而不是默认的从右到左.
我看过Bootstrap的CSS,并有转换：width .6s ease;然而,我不知道它如何决定条纹效果如何移动.
谢谢.
解决方法
如果要使进度条从左到右进行动画处理,可以通过将animation-direction属性设置为反向来实现.
在BS3的css文件中有这个部分：
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress.active.my-reverse-class .progress-bar {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
-ms-animation-direction: reverse;
-o-animation-direction: reverse;
animation-direction: reverse;
}
然而,请注意,UX研究表明,进度条的从右到左的动画对大多数用户来说感觉“更快”：https://ux.stackexchange.com/questions/18361/why-do-progress-bars-animate-backwards
