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

Category : CSS

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

今は 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 に限らず、他の方法でも。

Leave a Reply