1

開始状態と終了状態を持つ CSS3 アニメーションを実装しました。終了状態に達すると、アニメーションは停止し、繰り返されません。私がする必要があるのは、アニメーション全体をバイパスする「最後にスキップ」リンクを用意することですが、その最終状態を表示します。CSS3経由でこれを行うことは可能ですか？

アニメーション ページは次のとおりです: http://bit.ly/1csZq2d

ありがとう！

4

1 に答える 1

3

Javascript のみを使用してコンテナのクラスを切り替え、2 つの方法でアニメーションをオーバーライドします。

  1. 同じ最終結果を持つ別のアニメーションでアニメーションを上書きし、まだ終了状態を次のように設定しanimation-fill-mode: forwards;ます: http://codepen.io/shshaw/pen/yzhLb

  2. アニメーションの最後にあるスタイルを切り替えanimation: noneて手動で追加します: http://codepen.io/shshaw/pen/Jpmkc

最初の方法は管理が簡単な場合があるため、すべて@keyframesを 1 か所で編集し、1 か所に終了状態のみを含めるだけです。また、アニメーションを高速化してすばやく完了するという利点もありますが、それでも比較的スムーズに遷移します。

于 2013-11-14T22:20:11.990 に答える