(2020/03/20: 追記) codepenのデモつきの記事をこちらに移行しました。 ↓↓ 以下、元記事です。 最終的なデモはこちら。 http://jsdo.it/takumifukasawa/QWj9 概要 CSSでスプライト画像の連番アニメーションを実装する場合、background-positionをずらす方法を使っていた。しかし、同じ画面内で、サイズの大きい画像のスプライトアニメーションをいくつも動かしたい場面があり、パフォーマンスがネックになってしまった。 実際、background-positionのcss animationはGPUレンダリングではないので、再描画処理が走ってしまう。chromeのデバッガーツールで、「Rendering」の「Paint Flashing」を見ると、このように再描画処理が走っているのがわかる。 デモはこちら http://jsdo.it/