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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」
WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ
-
売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法
「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの
-
一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」
ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス
-
動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見
動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos
-
もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」
ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を
-
CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」
CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自
-
HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」
HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール
-
デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60
新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今
-
激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」
YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない