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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
無料で使えるフラットデザインUIキット40
フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン
-
-
CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」
CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊
-
-
twitterでのキーワードのひろがりを調べられるツール「twimp」
twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した
-
-
CSSアニメーションを使ったエフェクトライブラリー9
CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい
-
-
これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22
CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。
-
-
いまさら聞けない無料のアイコンフォントの導入の仕方・使い方
アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし
-
-
100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?
各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に
-
-
名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45
今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ
-
-
セキュリティー/プライバシーにすぐれたブラウザ6選
IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが
-
-
デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60
新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今