アニメーションとは？
ある状態から別の状態へ「連続的」に変化をするものを広い意味でアニメーションといいます。つまりある値からある値への変化を連続的に実行できます。
たとえば、リンクの背景色が赤に設定されて、マウスオーバーしたときに緑になる効果。これはよく見かけるものですが、CSS3のアニメーションを使うと、赤からだんだんと緑になっていく指定ができます。
CSS3でアニメーションの仕様群を策定中
CSS3はまだW3Cで策定中の仕様で、最終勧告にはいたっていません。現在のところ、草案（Working Draft）が、2009年12月、2009年3月に発表された段階にとどまっています。
まだ正式なW3Cの仕様ではありませんが、いくつかのブラウザで先行実装がはじまっています。おおまかにいって、2011年現在では、Safari、Google Chrome、Mozilla Firefox、Operaなどがサポートしていますが、プロパティひとつひとつのサポートがブラウザによって異なっていることもあります。
現在のところもっとも実装が進んでいるブラウザは、WebKitとよばれるHTMLレンダリングエンジンを搭載しているSafari、Google Chrome、Mozilla Firefox 4以降の3つです。
ブラウザの先行実装ははじまっていますので、これからだんだんと普及していくであろう技術です。
CSS3アニメーションの使いどころ
では、まだ先行実装の段階であるCSSのアニメーション機能が注目される理由はなんでしょうか？
これまでも、FlashやJavaScriptを用いてサイト上でアニメーションを実装することはできました。PC環境上だけでの動作を考えれば、特にCSS3を使うメリットはそれほど多くないといえます。
ところが、スマートフォン環境では事情が変わります。まず、iPhoneはFlashをサポートしていません*。また、JavaScriptを用いて、CSSを書き換えてアニメーションをする手法は、CSSに比べ、概して実行に時間がかかり、少しもたついた動作になることもあります。操作感が重要なスマートフォン環境では、できれば避けたいところです。
*注：Android搭載スマートフォンのswfの再生
Android搭載スマートフォンでは、Android2.1で「Flash Lite4」、Android2.2では「Flash Player 10」に対応しており、swfファイルの再生は可能です。
つまり、PC環境も含むすべての環境で強みを発揮できるとはいいがたいですが、特定の環境下においては、問題なく使用、活用できる技術になっています。
具体的には、Safari、Google ChromeなどWebKit系のブラウザが主流を占める以下のような環境での使用が想定できます。
- Airアプリケーション（HTML+CSS+JavaScriptが利用可能。WebKitベース）
- iPhone用サイト（ブラウザはSafari）
- Android用サイト（ブラウザはChromeベース）
- iPhone用アプリケーション（HTML+CSS+JavaScriptを利用できるフレームワークが存在する）
- Android用アプリケーション（HTML+CSS+JavaScriptで利用できるAPIが存在する）
- Google Chromeの拡張機能（HTML+CSS+JavaScriptで記述する）
CSS3のアニメーション関連の仕様
W3Cで草案作成が進められているCSS3のアニメーション関連の仕様をまずざっとご紹介しておきましょう。
CSS Transitions Module Level 3
草案（Working Draft）は2009年12月に発表されています。Transitionsはある値からある値への変化を、自動的にアニメーションさせることができます。
CSS Animations Module Level 3
草案は2009年3月に発表されています。Transitionsと同じように、ある値からある値への変化をつけるものですが、どのように変化するかをTransitionより細かく指定することができます。
CSS3のアニメーション仕様は、上記の2つの仕様だけです。ですが、アニメーションを実装する上で、頻繁に組み合わせて使う仕様が2つあります。
CSS 2D Transforms Module Level 3
草案は2009年12月に発表されています。画像などの要素の位置を変えたり、倍率を変えたり、傾けたり、回転させたりすることができます。
CSS 3D Transforms Module Level 3
草案は2009年3月に発表されています。2D Transformと同じく、要素の位置を変えたり、回転させることなどができますが、3次元的に表現することができます。
コードの書き方の基本
現在のところ正式な仕様ではないので、「ベンダープリフィックス（vendor prefix）をつけて、独自実装であることを示さないと動作しないのが基本です。正式勧告になったあかつきには、ベンダープリフィックスを外すことが望ましいとされています*。
*注：ベンダープリフィックス
Cascading Style Sheets (CSS) Snapshot 2007によれば、ベンダー独自CSSプロパティやCSS拡張用に、組織ごとにprefixを設けています。正式勧告にいたっていないW3CのCSS仕様も、実験的な実装をする場合は、ベンダープリフィックスをつけたプロパティや値の名前（vendor-prefixed property or value names）を使うことを推奨しています。いったん仕様が勧告候補（Candidate Recommendation）の段階になれば、プリフィックスを外し、仕様書の文法どおりに記述するのが望ましいとされてます。
現時点で正式な勧告になっていない機能を実装する場合には、必ずベンダープリフィックスをつけます。この時、注意しなければいけないのは、まれにベンダーによってCSSの書式が異なっている場合があることです。W3Cの草案仕様の書式にベンダープリフィックスをつけただけでは動作しないことがあります*。
*注：ベンダープリフィックスを付ければ解釈されるとは限らない
書式がベンダーによって異なるものの例に、backgroudなどに指定することで、線形のグラデーションを指定できるlinear-gradientがあります最新（本記事執筆時点）のW3Cの草案では、グラデーションの方向指定として以下が提案されています。
| グラデーションの方向指定 | |
|---|---|
| 角度指定 | linear-gradient(90deg, 開始色, 終了色); |
| 方向指定 | linear-gradient(to bottom, 開始色, 終了色); |
この書き方はFirefoxには実装されていますが、Chromeでは、一部の書式が実装されていません。
たとえば、上から下へと黄色から青のグラデーションを描くbackground: -webkit-linear-gradient(**to bottom**, yellow, blue);はベンダープリフィックスが付いていてもChromeには解釈されません。background: -webkit-linear-gradient(**bottom**, yellow, blue);なら解釈されます。一方、Firefoxはbackground: -moz-linear-gradient(to bottom, yellow, blue);もbackground: -moz-linear-gradient(bottom, yellow, blue);も解釈されます（以上、2012年3月現在）。
一方、いったん正式勧告になりブラウザの実装が対応すると、今度はベンダープリフィックスをつけたために動作しないことがあります。そのため、ソースコードの書き方としては、それぞれのブラウザごとのベンダープリフィックスをつけた指定を書き、最後の行にベンダープリフィックスなしの指定を書くという方法がおすすめです。
-webkit-（Safari/Google Chrome用の指定）;
-moz-（Firefox用の指定）;
-o-（Opera用の指定）;
-ms-（Internet Explorer用の指定）;
・
・
・
（ベンダープリフィックなしの指定）;上記のような書き方にすれば、ブラウザにベンダープリフィックスなしの実装がなされた場合でも、最後の行だけが有効とされ、正常に動作する可能性が高くなります。
実際に実装するためには、上記のような事情や書き方を踏まえないといけないのですが、このメールマガジンでは、ソースコードが分かりにくくなるのを避けるため、ひとまずWebKitのベンダープリフィックスをつけた形で、ご紹介します。
|div{
transition : all .5s; /* CSS3 */
-webkit-transition : all .5s; /* WebKitの独自実装 */
|}