CSS3 アニメーションの再生、一時停止、再生を制御する_html/css_WEB-ITnose

CSS3 アニメーション コードは比較的単純で、そのパフォーマンスは JavaScript アニメーションよりわずかに優れています (アニメーションを実行するためだけに新しいレイヤーを作成するなど) ブラウザーは CSS3 アニメーション用にいくつかの最適化を行います。ただし、CSS3 アニメーションの欠点は、アニメーション制御の柔軟性が十分ではないことです。ビデオ再生を制御するように CSS3 アニメーションの再生、一時停止、再生を制御するにはどうすればよいですか?次の例は私の試みです。

まずはここをクリックして効果を確認してください。

CSS3 アニメーションでは、アニメーション要素のanimation-play-state属性は、アニメーションが実行中か一時停止中かを指定します。属性値が一時停止されたアニメーションを指定する場合は一時停止され、属性値が実行中のアニメーションを指定する場合は実行中です。デフォルトは「実行中」です。したがって、JavaScript を使用してこれら 2 つの値を動的に変更すると、CSS3 アニメーションの再生と一時停止を制御できます。

CSS3 アニメーションの再生の制御は少し面倒です。主なアイデアは、最初にアニメーション要素のアニメーション スタイルを削除してから、アニメーション スタイルをクラス セレクターに独立させることに注意することです。 classList オブジェクトの Delete メソッドを直接使用すると便利です。さらに、削除と追加には 2 つの操作の間に一定の時間間隔が必要ですが、これは setTimeout で実現できます。

JavaScript を使用しても、CSS3 アニメーションの制御には制限があります。より複雑な効果には、JavaScript アニメーションを使用する必要があります。