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

投稿者: | 2018年7月31日

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

1. やりたいこと

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

2. やってみた!

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

停止する。

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

開始する。

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

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

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)