CSS3ではFlashやJavaScriptの様にアニメーション効果を付けることが可能な
「Transition」という指定が用意されています。
今のところ対応しているブラウザはSafariとGoogleChromeのみになっていますが
動きも滑らかで結構すごいです。
今回はそんなCSS3アニメーションのチュートリアルのご紹介。
まずはマウスオーバーで画像を拡大させる「Sexy Image Hover Effects using CSS3」。
≫Sexy Image Hover Effects using CSS3 – nikesh.me
≫デモはこちら(SafariもしくはGoogleChromeでご確認下さい)
単純に画像が拡大アニメーションするだけでなく、
演出的な要素も加えられるところが◎。
CSSのみでこれだけの動きが実現できるとは。。。
続いては「Sexy Interactions with CSS Transitions」
≫Sexy Interactions with CSS Transitions | Carsonified
今まではjQueryを使って表現していた動きがCSSのみで可能になります。
CSS3アニメーションの記述方法が細かく紹介されているので、参考になります。
最後に「CSS3 アニメーション(Transitions)の使用方法」
≫CSS3 アニメーション(Transitions)の使用方法 | CSS Lecture
≫デモはこちら(SafariもしくはGoogleChromeでご確認下さい)
マウスオーバーでボタンを動かしたり、背景色や画像をクロスフェードさせています。
こちらもCSS3アニメーションの記述方法が細かく紹介されているので、とても参考になります。
以上、3つエントリーの紹介。
CSS3とHTML5が今よりも現実的に使用できる状況になった際には
FlashやJavaScriptを必要としなくても、さまざまな表現が可能になりそうですね。
ご参考までに。。。