CSS Transitions & CSS Animation - Which should I use?

Appleは9月4日(米国時間)付けと10月10日(米国時間)付けでアニメーションを実現するための2つのCSS機能を提案している。 CSS TransitionsとCSS Animationだ。提案している作成者もまったく同じで、1月違うだけで同じ機能を実現するためのCSS仕様が2つ提案されていることになる。

Mozilla Foundation, JavaScript Evangelist, John Resig氏は11日(米国時間)、自身のブログにおいてCSS Animations and JavaScriptのタイトルのもと両CSS機能の違いを端的にまとめている。CSS TransitionsとCSS Animationの用途の違いを把握するうえで有益な内容だ。

要約すると、CSS Transitionsは簡単な指定でアニメーションを実現するためのもの、CSS Animationは複雑な指定になるがJavaScriptから細かく制御できる機能、ということになる。

CSS Transitionsの記述例 - CSS Animations and JavaScriptより抜粋

CSS Animationの記述例 - CSS Animations and JavaScriptより抜粋

シンプルさからいってCSS Transitionsの方が好ましいことが多いだろう。対象と時間を指定すれば、その時間の間でスムーズに描画処理が行われる。例えば100pxから500pxへの幅の変更を1秒間でという指定にすればいきなり幅が切り替わるのではなくスムーズにアニメーションしながら切り替わるようになる。

John Resig氏が開発しているAjax JavaScriptフレームワークjQueryは同機能をサポートしているが、jQueryの実装している機能とWebKit (Safari)が対応したCSS Transitionsの機能を使うのとでは、CSS Transitionsを使った方がスムーズに描画されているという。jQueryとしては優れた機能が実装されるならそちらを使いたいわけだから、CSS Transitionsがどの程度使えるかは当然調査対象となるわけだ。

しかしCSS Transitionsは簡単に使えることを目指しているもので、アニメーション処理が開始されると、処理が終わるまではJavaScriptから制御ができない。アニメーションの同期をとる方法も用意されていない。逆にCSS Animationは@keyframesという概念を導入するなど指定が複雑になるが、JavaScriptから細かく制御でき、途中でアニメーションを止めることもできる。これがCSS TransitionsとCSS Animationの大きな違いだ。実際、CSS AnimationはCSS Transitionsに対する拡張機能として定義されている。

同機能がCSSのデフォルト機能として広まった場合、Webデベロッパやコーダの多くは簡単に扱えるCSS Transitionsを主に採用し、細かい制御が必要になるAjax JavaScriptフレームワークの開発ではCSS Animationが採用されることになるのではないかとみられる。