ウィンドウが非アクティブになったらアニメーションを一時停止する
サンプルには回転と色との2種類のアニメーションが実行されています。
対象は.sphere
と.circle
です。
.sphere:-moz-window-inactive,
.circle:-moz-window-inactive {
-moz-animation-play-state: paused;
}
これを追加することによって、ウィンドウが非アクティブになったらアニメーションを一時停止するようになります。
再度アクティブになったら、アニメーションは停止した時点から再開されます。
特定の要素ではなく、全てのアニメーションを停止するなら
:-moz-window-inactive {
-moz-animation-play-state: paused;
}
とでも指定しておくといいんじゃないでしょうか。
:window-inactive
擬似クラス自体はWebkitにもあるのですが、::selection
と::-webkit-scrollbar
関係にしか使えないっぽいです。
FlashアニメーションをSVG + CSS Animationsに変換して表示するようなサンプルを見ていると、こういった指定をすることで状況によっては見る側の負担を減らせるかもしれないなーと思ったりしてます。
もちろん、:window-inactive
に限らず、他の方法でも。