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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る
ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr
-
無料で利用できる検索フォーム12(CSS3,HTML5,jQuery)
検索フォームはサイトに欠かせない重要な要素の1つになっています。 最近では、アニメーションを用いた
-
ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21
CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ
-
売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法
「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの
-
インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」
Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール
-
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ
-
クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」
CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos
-
通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」
隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」がリリースされました。
-
UIデザインのインスピレーションで溢れてる「UXPorn」
サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ
-
激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」
YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて