個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

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

CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。
掲載されているのは、CodePenというコードプレイグラウンドサイトです。
ご紹介しているサンプルコードはすべて、無料で利用可能なものばかりです。
いずれのサンプルも「CSSでこんなことができるの!」といったものばかりですので、見ているだけで楽しいし、勉強にもなりますね。
ただ、CSSアニメーションはブラウザ状況によってサポート状況が異なるので、使用する場合には注意が必要ですが、魅力的であることには間違いありません。
サイト制作のご参考になれば幸いです。

Sailboat Animation

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
船とカエルがコミカルに海上を進むアニメーションです。
Sailboat Animation

Weather Icons

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
天気状況をアニメーションで展開。
Weather Icons

Less Loaders

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
多彩なローディングアニメーション。
Less Loaders

Popup Window

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
さまざまポップアップアニメーションを実装しています。
Popup Window

Circle Illusion Loader

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
カラフルな円が幻想的に回転します。
Circle Illusion Loader

Tumblr Like/Unlike

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
ハートをクリックすると、ハートブレイクしたり、成就したりするアニメーション。
Tumblr Like/Unlike

Minimal Throbbers

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
円が高速で回転します。
Minimal Throbbers

CSS3 Animated Effects

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
カーソルを合わせるとさまざまなホバーエフェクトを見せるアニメーション。
CSS3 Animated Effects

Map Marker

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
地図マーカーのアニメーション。
Map Marker

Cloudy Spiral

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
幻想的な回転アニメーション。
Cloudy Spiral

MacBook Air

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
MacBookがコミカルにアニメーションします。
MacBook Air

Cubes in CSS3

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
次々と立方体が現れるアニメーション。
Cubes in CSS3

Slidedown UI

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
スライドダウンするアニメーション。
Slidedown UI

Animated Switch

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
アニメーションスイッチ。
Animated Switch

Moving Gears

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
ローディングを歯車のアニメーションで。
Moving Gears

PayPal Animation

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
PayPal風ローディングアニメーション。
PayPal Animation

CSS3 Loader

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
一風変わったローディングアニメーション。
CSS3 Loader

Animated Wifi Symbol

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
WiFiのシンボルがアニメーション。
Animated Wifi Symbol

CSS3 Buttons

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
とってもかっこいいホバーエフェクト。
CSS3 Buttons

Animated Checkbox

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
クリックするとチェックがアニメーションで。
Animated Checkbox

Working Clock

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
アナログ時計のアニメーション。
Working Clock

Rabbit

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
かわいらしいウサギがピョンピョンと飛び跳ねるアニメーション。
Rabbit

CSS3 Loading Bar

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル
サウンドイコライザーのようなローディングアニメーション。
CSS3 Loading Bar

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 10

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印

記事を読む

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45

今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ

記事を読む

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

CSSだけで表現されているのに、信じられないほど美しいサイト「In Pieces」をご紹介します。

記事を読む

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む