CSSアニメーションによるGPU処理 昔はWebサイトでアニメーションを行う際はJavaScriptがよく使用されたが、現在はCSSアニメーションが使用されることが多い。 理由はJavaScriptは主にCPUで処理するが、CSSはGPUを併用して処理するため処理負荷が軽く、スマートフォンなどの低スペックな端末でもスムーズにアニメーションを行うことができるからだ。 ただし、CSSを使用してアニメーションを行っていても、正しく使用しないとGPUで効率的に処理することができない。 GPU処理の確認方法 Chromeの場合はまずChrome Developer Toolを開いて3点ボタンをクリックしてRenderingを選択する。 RenderingタブでPaint flashing、Layer borders、FPS meterにチェックを入れるとアニメーション部分に枠線が付き、fpsやGPU
![CSSアニメーションがGPUで処理されているか確認する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7df2fbfb7aa9f865f56b95ca460d99994ac941de/height=288;version=1;width=512/https%3A%2F%2Fiwb.jp%2Fwp-content%2Fuploads%2F2017%2F12%2Fchrome-safari-gpu-css-check-02.png)