1

以下のコードを使用して CSS3 でグラフィックを回転させている場合 (これは単なる Webkit バージョンですが、スタイル シートには他のブラウザー固有のバージョンがあります)。

.bottomSmallCogStopAnimating  {
   -webkit-animation-name: rotate;
   -webkit-animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

jQuery を使用してこの css クラスを追加し、アニメーション名を削除してアニメーションを停止しています。

.stopAnimating {
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}

このプロパティを削除すると、グラフィックが回転前の状態にリセットされるように見えるため、グラフィックが元の回転に戻り、見た目がかなり悪くなります。

これが起こらないようにする方法はありますか?ブラウザは最後の位置を記憶し、この時点でアニメーションを停止しますか?

乾杯、ステファン

4

2 に答える 2

1

cssからアニメーションを削除するか、「none」にすると、初期状態に戻ります。次を使用して一時停止できます。

document.getElementsByClassName('bottomSmallCogStopAnimating')[0].webkitAnimationPlayState = 'paused'

または、クラス名を追加します。

.stopAnimating {
-webkit-animation-play-state: paused;
}

あなたが何をしようとしているのかよくわかりません。

于 2012-07-10T10:15:19.847 に答える
1

アニメーションが終了したときに 100% の状態を維持しようとしていますよね? したがって、アニメーションは 0% から 100% までアニメーション化され、その後 100% ではそのままになります。それが目的である場合は、実際にこれを追加する必要があります。

-webkit-animation-fill-mode:forwards;

js は必要ありません。これにより、アニメーションが終了したときに 100% の状態が維持されます。

于 2012-07-11T22:51:48.070 に答える