CSS3ではFlashやJavaScriptの様にアニメーション効果を付けることが可能な
「Transition」という指定が用意されています。

今のところ対応しているブラウザはSafariとGoogleChromeのみになっていますが
動きも滑らかで結構すごいです。

今回はそんなCSS3アニメーションのチュートリアルのご紹介。

まずはマウスオーバーで画像を拡大させる「Sexy Image Hover Effects using CSS3」。

CSS3-animation01.jpg
Sexy Image Hover Effects using CSS3 – nikesh.me

デモはこちら(SafariもしくはGoogleChromeでご確認下さい)

単純に画像が拡大アニメーションするだけでなく、
演出的な要素も加えられるところが◎。
CSSのみでこれだけの動きが実現できるとは。。。

続いては「Sexy Interactions with CSS Transitions」

CSS3-animation02.jpg
Sexy Interactions with CSS Transitions | Carsonified

今まではjQueryを使って表現していた動きがCSSのみで可能になります。
CSS3アニメーションの記述方法が細かく紹介されているので、参考になります。

最後に「CSS3 アニメーション(Transitions)の使用方法」
CSS3-animation03.jpg
CSS3 アニメーション(Transitions)の使用方法 | CSS Lecture

デモはこちら(SafariもしくはGoogleChromeでご確認下さい)

マウスオーバーでボタンを動かしたり、背景色や画像をクロスフェードさせています。
こちらもCSS3アニメーションの記述方法が細かく紹介されているので、とても参考になります。

以上、3つエントリーの紹介。

CSS3とHTML5が今よりも現実的に使用できる状況になった際には
FlashやJavaScriptを必要としなくても、さまざまな表現が可能になりそうですね。

ご参考までに。。。