Bootstrap 3：反向动画进度条

Question

看到了针对2.0版本的回答，但它们似乎在3.0版本中表现不同。

我想要在Bootstrap 3中反转进度条动画，使其从左向右移动，而不是默认的从右向左移动。

我查看了Bootstrap CSS中的transition: width .6s ease;，但我不确定它如何确定条纹效果的移动方向。

谢谢。

- Alias

---

transition 属性是用于进度条实际移动/填充时的，动画设置在其他地方。 - Wesley Murch

如果有帮助的话，这里是另一个（部分）工作示例：http://stackoverflow.com/questions/43901898/bootstrap-reverse-animated-progress-bar-like-github - loretoparisi

Answer 1

如果您想使进度条从左到右动画显示，可以通过将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

- Wesley Murch

---

谢谢，可以了！确实有点慢，但对于我正在处理的工作来说不是问题。 - Alias

Answer 2

哦！我懂了。您可以通过将进度条设置为 float: right 来交换进度条的方向。它应该完全相同。

- Tom Lagier

---

如果这个有效，那么它应该完全成为被接受的答案。 - Shane H

这个可行！请接受这个作为答案。非常简单而且极其强大！ - Bibimission

Answer 3

我通过旋转进度条来解决了这个问题，下面是一个示例：

.progress-bar {
    transform: rotate(180deg);
}

https://codepen.io/anon/pen/jGYqrx

- Hicham

---

您可以再次使用此属性来反转其内部文本。 - user3382203

Answer 4

进度条从右到左动画：

.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;
}

- Milad Ghiravani