HP作ってみる!

(49) CSSアニメーションを一時停止&再開

2,084 views

この記事は最終更新から 2828日 が経過しています。

1. やりたいこと

・Windowがフォーカスを失ったらアニメーションを停止する。
・Windowがフォーカスを取得したらアニメーションを再開する。
のようなことをやりたい。

2. やってみた!

(1) アニメーションの停止、開始を制御する。

停止する。

$("xxxxxxxx").css("animation-play-state","paused");

開始する。

$("xxxxxxxx").css("animation-play-state","running");

(2) WindowのフォーカスON, OFFを捕捉する。

前回の投稿 (48) ウィンドウのアクティブ化時、非アクティブ化時に処理する。 を参照のこと。


アクセス数(直近7日): ※試験運用中、BOT除外簡易実装済
  • 2026-05-26: 0回
  • 2026-05-25: 0回
  • 2026-05-24: 0回
  • 2026-05-23: 2回
  • 2026-05-22: 0回
  • 2026-05-21: 0回
  • 2026-05-20: 0回
  • モバイルバージョンを終了