Life is beautiful

　HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。

　私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。

　今日作ったのは、HTML5+CSS3上で可能になる（ただし現在ではWebkit独自の拡張を含む）３つのアニメーション・テクニックの比較（左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ（ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか？））。

　詳しくはソース（参照）を見ていただければ分かると思うが（MITライセンス）、簡単に解説するとこんな感じになる。

1. DOM Animation

　HTML ElementをJavascriptからDOM操作で位置（style.top）を動かす手法。HTML4でアニメーションを実現しようとしたらこの方法しかなかった。DOMの操作でアニメーションを実現するため、デバイスの能力やブラウザーの実装のされかたによっては、全フレームを描画してもらえない場合があり（DOMに変更をほどこしても、ブラウザーは画面への反映を非同期に行う点に注目）、アニメーションが多少カクカクすることがあるので要注意。

2. CSS Animation

　これはWebkitが先んじて実装した、transition (現時点では -webkit-transition）というスタイルを使って行うアニメーション（だから現時点ではWebkitベースのブラウザーでしか動かない）。DOMの操作は最初にトリガーとなるスタイルの変更（この場合は"bottom"というクラス属性を付けることで実現）を一度だけすれば、残りはブラウザーがしてくれる。JavaScriptをごりごりと走らせる必要はないのでCPUへの負荷は他のものより低いが、ゲームなどによくある「衝突判定」などができないので、メニューをプルダウンするなどの固定的なアニメーションの実装に適している。

3. Canvas Animation

　これがAppleがSafariで先に実装し、IE以外のほぼすべてのブラウザーに採用されている<canvas>タグを使ったアニメーション。DOMを一切操作しないが、１フレームごとにJavaScriptで再描画するため、CPUへの負荷は重い。ただし、DOM Animationと異なって描画のタイミングを自分でコントロールできるため、iPhoneのようなCPUの力がそれほどない場合、DOM Animationよりも一般的に見た目がスムーズになる。