看到2.0的答案,但它们似乎对3.0的工作方式不同。
我想在Bootstrap 3中反转进度条动画,因此它从左向右移动,而不是从右到左默认。
我查看了Bootstrap CSS,并且transition: width .6s ease;
但是我不确定它是如何确定条纹效果移动的方式。
感谢。
答案 0 :(得分:15)
如果您想要从左到右设置进度条动画,可以将animation-direction
属性设置为reverse
来完成此操作。
在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;
}
您可以添加自己的类来添加所需的设置(默认为normal
):
.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;
}
但请注意,用户体验研究表明,进度条的从右到左动画对大多数用户来说“更快”:https://ux.stackexchange.com/questions/18361/why-do-progress-bars-animate-backwards
答案 1 :(得分:4)
噢!哦!我得到了这个。您可以通过将栏设置为float: right
来交换进度条的方向。它应该完全相同。
答案 2 :(得分:1)
答案 3 :(得分:0)
进度条从从右到左动画:
.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 .progress-bar {
-webkit-animation: reverse progress-bar-stripes 2s linear infinite;
-moz-animation: reverse progress-bar-stripes 2s linear infinite;
-ms-animation: reverse progress-bar-stripes 2s linear infinite;
-o-animation: reverse progress-bar-stripes 2s linear infinite;
animation: reverse progress-bar-stripes 2s linear infinite;
}