2015/01/05
CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル23

CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。
掲載されているのは、CodePenというコードプレイグラウンドサイトです。
ご紹介しているサンプルコードはすべて、無料で利用可能なものばかりです。
いずれのサンプルも「CSSでこんなことができるの!」といったものばかりですので、見ているだけで楽しいし、勉強にもなりますね。
ただ、CSSアニメーションはブラウザ状況によってサポート状況が異なるので、使用する場合には注意が必要ですが、魅力的であることには間違いありません。
サイト制作のご参考になれば幸いです。
Sailboat Animation
船とカエルがコミカルに海上を進むアニメーションです。
Sailboat Animation
Weather Icons
天気状況をアニメーションで展開。
Weather Icons
Less Loaders
多彩なローディングアニメーション。
Less Loaders
Popup Window
さまざまポップアップアニメーションを実装しています。
Popup Window
Circle Illusion Loader
カラフルな円が幻想的に回転します。
Circle Illusion Loader
Tumblr Like/Unlike
ハートをクリックすると、ハートブレイクしたり、成就したりするアニメーション。
Tumblr Like/Unlike
Minimal Throbbers
円が高速で回転します。
Minimal Throbbers
CSS3 Animated Effects
カーソルを合わせるとさまざまなホバーエフェクトを見せるアニメーション。
CSS3 Animated Effects
Map Marker
地図マーカーのアニメーション。
Map Marker
Cloudy Spiral
幻想的な回転アニメーション。
Cloudy Spiral
MacBook Air
MacBookがコミカルにアニメーションします。
MacBook Air
Cubes in CSS3
次々と立方体が現れるアニメーション。
Cubes in CSS3
Slidedown UI
スライドダウンするアニメーション。
Slidedown UI
Animated Switch
アニメーションスイッチ。
Animated Switch
Moving Gears
ローディングを歯車のアニメーションで。
Moving Gears
PayPal Animation
PayPal風ローディングアニメーション。
PayPal Animation
CSS3 Loader
一風変わったローディングアニメーション。
CSS3 Loader
Animated Wifi Symbol
WiFiのシンボルがアニメーション。
Animated Wifi Symbol
CSS3 Buttons
とってもかっこいいホバーエフェクト。
CSS3 Buttons
Animated Checkbox
クリックするとチェックがアニメーションで。
Animated Checkbox
Working Clock
アナログ時計のアニメーション。
Working Clock
Rabbit
かわいらしいウサギがピョンピョンと飛び跳ねるアニメーション。
Rabbit
CSS3 Loading Bar
サウンドイコライザーのようなローディングアニメーション。
CSS3 Loading Bar
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ
-
-
よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル
初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム
-
-
ショッピングカートだけの利用も無料!決済システムが充実したBASE(ベイス)が使える
無料でネットショップが開設できるBASE(ベイス)に、ショッピングカートだけの利用も無料というサービ
-
-
UIデザインのインスピレーションで溢れてる「UXPorn」
サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ
-
-
気になるサイトのモニタリング&変更箇所を知らせてくれる無料ツール6
気になるサイトをモニタリング&変更箇所を知らせてくれる無料ツールをまとめてご紹介します。 みなさん
-
-
月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12
ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし
-
-
ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」
ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ
-
-
名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45
今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ
-
-
CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」
最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし
-
-
WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80
WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ