[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)
キーフレームを使ったアニメーションの実装方法。

sponsors

top of page

©2018 coliss