[CSS]ウェブページで手軽にアニメーションが楽しめる -CSS Transitions

CSS3でアニメーションを実装するTransitionsをウェブページで効果的に使用するためのチュートリアルをWeb Designer Depotから紹介します。

CSS Transitions 101

TransitionsはSafariやChrome上で動作するCSS3のアニメーション機能で、JavaScriptやFlashを使用せずにウェブページに実装することができます。
※Firefoxでも将来的にはサポートされる予定です。

チュートリアルでは3つのデモが掲載されています。
※Safari, Chromeでご覧ください。

マウスホバーで背景色がアニメーションで変更します。

アニメーションで開閉するドロップダウンナビゲーション。

オブジェクトが指定したポイント間でアニメーションで移動します。

Transitionsの簡単な実装例として、一番上のキャプチャにあるようにテキストの色をマウスホバーで変更する際は下記のように記述します。

a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

通常の記述のように、デフォルトのカラーや訪問済みの際にも適用が可能です。

a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

チュートリアルでは他にも、Transitionsが適用可能なプロパティの一覧や更に高度な実装例なども紹介されています。