CSSアニメーションがGPUで処理されているか確認する方法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
