[CSS]CSS3アニメーションを使ったスタイルシートのテクニックのまとめ

アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。
CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。

対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。
※デモページは明記がないものは全てFirefox4での表示です。

Display social icons in a beautiful way using CSS3
デモページ
ツールチップをふんわり表示し、他をフェードアウトします。

Flex Nav
デモページ
スライドとフェードのアニメーションが楽しいナビゲーション。

CSS3 Minimalistic Navigation Menu
デモページ
バーがアニメーション表示されるミニマリズムなナビゲーション。

[ad#ad-2]

CSS3 Flying Menu
デモページ
ナビゲーションがふんわりと浮かびます。

Making a CSS3 Animated Menu
デモページ
フェードのアニメーションを伴ったHTML5のナビゲーション。

Using CSS3 Transitions to create rich effects
デモページ
びっくりするくらい飛び出るナビゲーション。

Fading Button Background Images With CSS3 Transitions
デモページ
背景に画像を使ってフェードのアニメーション。

Animated Navigation Menu with CSS3
デモページ(Chrome)
ラベルがくるっと変わるアニメーション。

Recreating the OS X Dock
デモページ
アニメーションで動作するMac OS Xのドック。

Cool notification messages with CSS3 & Jquery
デモページ
jQueryを併用してパネルをアニメーション表示。

3d animation using pure CSS3
デモページ(Safari)
3Dに表示されたパネルが立体的にアニメーション。

Smooth Fading Image Captions with Pure CSS3
デモページ
フェードのアニメーションでキャプションを表示。

Create a CSS3 Image Gallery with a 3D Lightbox Animation
デモページ
3Dのアニメーションとライトボックスを備えたギャラリー。

Sexy Image Hover Effects using CSS3
デモページ
さまざまなホバーエフェクトを備えた画像ギャラリー。

Going Nuts with CSS Transitions
デモページ(Chrome)
アニメーションで拡大表示する画像ギャラリー。

Roating Image Gallery
デモページ(Chrome)
回転するちょっと変わった画像ギャラリー。

Fancy Image Hover Using CSS3
デモページ
画像にホバーでさまざまなアニメーション。

Rotating billboard using only CSS3
デモページ(Safari)
看板風にローテーションで次々に画像を表示します。

Create Animated Price Grid Using CSS3
デモページ(Chrome)
アニメーションで拡大する価格表。

Circle Zoom
サークル状に拡大するアニメーション。

Pure CSS Slideshow
デモページ
アニメーションでスライドするスライドショー。

Pure CSS(3) accordion
デモページ
アニメーションでスライドするアコーディオン。

CSS3 DVD Animation
デモページ
DVDがくるくる回転してスライド表示。

Create Ajax Loading Animation with CSS3
デモページ(Chrome)
ローディングのアニメーション。

CSS3 Transforms, Transitions, and Animations in Action
デモページ
イラストを使ってCSS3アニメーションのお勉強。

[ad#ad-2]

Guernica
アニメーションで動くゲルニカ。

CSS 3D Meninas
デモページ
視差効果を利用し、Pure CSSで立体的に見せます。

Pure CSS Coke Can
デモページ
上記と同シリーズ、スクロールでコーラの缶がくるくると。

CSS Paper Bird
デモページ
上記と同シリーズ、スクロールで光源が移動し影が変わります。

Walking
滑らかなアニメーションで歩きます。

Falling Leaves
デモページ(Chrome)
落ち葉が落ちていくアニメーションが美しいです。

The Man From Hollywood
デモページ
セレクタ操作にスクリプトを使用していますが、アニメーションのすべてはCSSのみです。

CSS3 animations and their jQuery equivalents
デモページ(Chrome)
同じようなアニメーションをCSS3とjQueryで実装。

7 javascript-effect alternatives using CSS3 for webkit browsers
デモページ(Chrome)
JavaScriptで実装していたエフェクトをCSS3で実装。

Start Experimenting With CSS3 Keyframe Animations
デモページ(Chrome)
キーフレームを使ったアニメーションの実装方法。