HTML＋CSS3で軽快アニメーション！Web制作にGPU処理を

CSS3が本格的に浸透し始め、Webページにアニメーションを取り入れたい！と考える場面も多くなりました。
ぜひ、この記事を読んで、Webページ制作軽快なアニメーション表現ができるようになってみましょう。
CSS3での解説が中心となっています。

GPUで処理をするCSS3プロパティをつかいます。 スマートフォンのレンダリングエンジンに用いられているWebKitではCPUで処理をするプロパティと、GPUで処理をおこなうプロパティにわかれています。

CPUで処理をするプロパティ例 width/height top/left/right/bottom transform2d （Z軸を用いない2次元変形処理）

GPUで処理をするプロパティ例 opacity transform3d （Z軸をつかうプロパティ matrix3d,translate3d,scale3dなど）

これらを取り入れることで、アニメーション処理をGPUに任せることができます。CSSはたくさんのプロパティがあるため、アニメーションの実装方法は様々です。 例にあげた以外にもプロパティはたくさんあります。

Macの開発ツール、xCodeにインクルードされているiphoneシミュレーターを用います。
XCode（Macのみ、App Storeより入手できます）

アプリケーション＞xcode.appをアクション（右クリック）から 「パッケージの内容を表示」を選択します。Contents＞Applications＞iOS Simulator.appより開きます。
メニューのDebugから「Color Blended Layers」にチェックします。

設定すると画面が緑と赤に色づけされされます。BOELのトップページで見るとナビゲーション、ページトップボタン、スライダーが動く時、一瞬赤色に変化します。

「赤色はGPU」「緑色はCPU」で処理を行っていることをさしています。これでどちらが処理を行っているか、視覚的に確認することができます。リアルタイムでどちらが描画しているか確認できる便利な機能です。

AppleメニューのアニメーションでGPU処理を行っています。動きのあるところが少ないですが、的確にGPU処理を取り入れています。

Aerolabサイト全体にGPU処理を行っています。 また、メニューのアニメーションに対してもGPUをつかっていることがわかります。

dot by dotこちらもサイト全体にアニメーションを取りいれています。 ここまでの動きもGPUをつかうことで軽快に表現できてますね。

とても便利なGPUですが、アニメーションを表現するにはGPUに全て任せればよいのでしょうか。アニメーションの処理が得意とは言っても、やはり限界があります。限られた性能の中で気持ちの良い表現をするには、今ユーザーが使っているPCやスマートフォンなどの性能を知ることも重要なポイントです。