WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

CSS3でアニメーション「Transition」

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を必要としなくても、さまざまな表現が可能になりそうですね。

ご参考までに。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です