:window-inactive擬似クラスとanimation-play-state

まあタイトル通りなんですが、ブラウザウィンドウが非アクティブになったらアニメーションを停止したいという話です。

今はFirefoxをメインに使っているんですが、要素をアニメーションさせたりするとChromeやSafariに比べて結構な負荷がかかるのです。
アニメーション回数を無限に指定していると、それを表示しているタブが最前面にある限り、ウィンドウがアクティブであろうとなかろうとアニメーションは続きます。
当然、起動しているのはFirefoxだけではないですから、実行中の他のアプリにも影響が出ます。
それをせめて違うウィンドウを見ているときだけでも上手いことできないかと思ったわけです。

そこで:-moz-window-inactive擬似クラスで対応することにしました。
サンプルは以下です。Firefox 10で確認できます。
アニメーションしているのを確認したらウィンドウからフォーカスを外してみてください。

ウィンドウが非アクティブになったらアニメーションを一時停止する

サンプルをダウンロード

サンプルには回転と色との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に限らず、他の方法でも。