[CSS]ウェブページで手軽にアニメーションが楽しめる -CSS Transitions
Post on:2010年1月20日
CSS3でアニメーションを実装するTransitionsをウェブページで効果的に使用するためのチュートリアルをWeb Designer Depotから紹介します。

TransitionsはSafariやChrome上で動作するCSS3のアニメーション機能で、JavaScriptやFlashを使用せずにウェブページに実装することができます。
※Firefoxでも将来的にはサポートされる予定です。
チュートリアルでは3つのデモが掲載されています。
※Safari, Chromeでご覧ください。

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

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

オブジェクトが指定したポイント間でアニメーションで移動します。
Transitionsの簡単な実装例として、一番上のキャプチャにあるようにテキストの色をマウスホバーで変更する際は下記のように記述します。
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> a:hover { color: red; -webkit-transition: color .25s linear; transition: color .25s linear; } </textarea> |
通常の記述のように、デフォルトのカラーや訪問済みの際にも適用が可能です。
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> a:link, a:visited { color: blue; -webkit-transition: color .25s linear .1s; transition: color .25s linear .1s; } </textarea> |
チュートリアルでは他にも、Transitionsが適用可能なプロパティの一覧や更に高度な実装例なども紹介されています。
sponsors