[CSS]CSS3アニメーションを使ったスタイルシートのテクニックのまとめ
Post on:2011年7月11日
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。
CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。
対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。
※デモページは明記がないものは全てFirefox4での表示です。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-04.png)
Display social icons in a beautiful way using CSS3
デモページ
ツールチップをふんわり表示し、他をフェードアウトします。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-19.png)
Flex Nav
デモページ
スライドとフェードのアニメーションが楽しいナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-12.png)
CSS3 Minimalistic Navigation Menu
デモページ
バーがアニメーション表示されるミニマリズムなナビゲーション。
[ad#ad-2]
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-01.png)
CSS3 Flying Menu
デモページ
ナビゲーションがふんわりと浮かびます。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-20.png)
Making a CSS3 Animated Menu
デモページ
フェードのアニメーションを伴ったHTML5のナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-28.png)
Using CSS3 Transitions to create rich effects
デモページ
びっくりするくらい飛び出るナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-14.png)
Fading Button Background Images With CSS3 Transitions
デモページ
背景に画像を使ってフェードのアニメーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-16.png)
Animated Navigation Menu with CSS3
デモページ(Chrome)
ラベルがくるっと変わるアニメーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-33.png)
Recreating the OS X Dock
デモページ
アニメーションで動作するMac OS Xのドック。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-10.png)
Cool notification messages with CSS3 & Jquery
デモページ
jQueryを併用してパネルをアニメーション表示。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-02.png)
3d animation using pure CSS3
デモページ(Safari)
3Dに表示されたパネルが立体的にアニメーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-25.png)
Smooth Fading Image Captions with Pure CSS3
デモページ
フェードのアニメーションでキャプションを表示。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-11.png)
Create a CSS3 Image Gallery with a 3D Lightbox Animation
デモページ
3Dのアニメーションとライトボックスを備えたギャラリー。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-23.png)
Sexy Image Hover Effects using CSS3
デモページ
さまざまなホバーエフェクトを備えた画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-32.png)
Going Nuts with CSS Transitions
デモページ(Chrome)
アニメーションで拡大表示する画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-35.png)
Roating Image Gallery
デモページ(Chrome)
回転するちょっと変わった画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-15.png)
Fancy Image Hover Using CSS3
デモページ
画像にホバーでさまざまなアニメーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-03.png)
Rotating billboard using only CSS3
デモページ(Safari)
看板風にローテーションで次々に画像を表示します。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-18.png)
Create Animated Price Grid Using CSS3
デモページ(Chrome)
アニメーションで拡大する価格表。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-09.png)
Circle Zoom
サークル状に拡大するアニメーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-21.png)
Pure CSS Slideshow
デモページ
アニメーションでスライドするスライドショー。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-22.png)
Pure CSS(3) accordion
デモページ
アニメーションでスライドするアコーディオン。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-24.png)
CSS3 DVD Animation
デモページ
DVDがくるくる回転してスライド表示。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-17.png)
Create Ajax Loading Animation with CSS3
デモページ(Chrome)
ローディングのアニメーション。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-13.png)
CSS3 Transforms, Transitions, and Animations in Action
デモページ
イラストを使ってCSS3アニメーションのお勉強。
[ad#ad-2]
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-07.png)
Guernica
アニメーションで動くゲルニカ。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-31.png)
CSS 3D Meninas
デモページ
視差効果を利用し、Pure CSSで立体的に見せます。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-29.png)
Pure CSS Coke Can
デモページ
上記と同シリーズ、スクロールでコーラの缶がくるくると。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-30.png)
CSS Paper Bird
デモページ
上記と同シリーズ、スクロールで光源が移動し影が変わります。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-08.png)
Walking
滑らかなアニメーションで歩きます。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-34.png)
Falling Leaves
デモページ(Chrome)
落ち葉が落ちていくアニメーションが美しいです。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-27.png)
The Man From Hollywood
デモページ
セレクタ操作にスクリプトを使用していますが、アニメーションのすべてはCSSのみです。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-05.png)
CSS3 animations and their jQuery equivalents
デモページ(Chrome)
同じようなアニメーションをCSS3とjQueryで実装。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-06.png)
7 javascript-effect alternatives using CSS3 for webkit browsers
デモページ(Chrome)
JavaScriptで実装していたエフェクトをCSS3で実装。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011071102-26.png)
Start Experimenting With CSS3 Keyframe Animations
デモページ(Chrome)
キーフレームを使ったアニメーションの実装方法。
sponsors