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

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner