JavaScript のみを使用して CSS3 アニメーションを一時停止および再開するにはどうすればよいですか?

JavaScript を使用した CSS3 アニメーションの一時停止と再開

問題:

一時停止と再開の方法外部に依存せずにJavaScriptを使用したCSS3アニメーションライブラリ?

解決策:

1. CSS アニメーション:

CSS キーフレームを使用してアニメーションを定義します。それぞれの不透明度の値とタイミングを指定するstep.

2. 関数の一時停止と再開:

アニメーションの一時停止と再開を処理する JavaScript 関数を作成します:

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

3. イベントリスナー:

アニメーション要素にイベント リスナーを追加して、一時停止および再開アクションをトリガーします:

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

追加メモ:

• アニメーションを複数回一時停止できるようにするには、新しいイベント リスナーを追加する前に既存のイベント リスナーをクリアします。
• または、提供された回答で提案されている CSS クラス アプローチを使用します。

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

これにより、この CSS を切り替えるだけでアニメーションを一時停止したり再開したりできます。イベントリスナーを必要としないクラス。

以上がJavaScript のみを使用して CSS3 アニメーションを一時停止および再開するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。