jquery - ブートストラップ 3: アニメーション プログレス バーを逆にする

Question

2.0 の回答を見ましたが、3.0 では動作が異なるようです。

Bootstrap 3 で進行状況バーのアニメーションを逆にしたいので、デフォルトの右から左ではなく、左から右に移動します。

Bootstrap CSS を調べましたがtransition: width .6s ease;、ストライプ効果がどの方向に移動するかをどのように決定するかはわかりません。

ありがとう。

Answer 1

おお！おお！私はこれを手に入れました。バーを に設定することで、プログレス バーの方向を入れ替えることができますfloat: right。まったく同じように機能するはずです。

Answer 2

プログレスバーは右から左にアニメーション化します:

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