2014/07/15
CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい可能性の扉を開きました。
特に注目したいのが、すぐれたCSSアニメーションを簡単にだれでも利用できるライブラリーが非常に豊富に存在していること。
今回紹介するCSSアニメーションエフェクトを手軽に実装できるライブラリーを利用すれば、サイトをもっと魅力的で目を引くコンテンツに仕上げてくれるはず。
もっとサイトをリッチに、楽しく、魅力的に見せたいと思っている方々のご参考になれば幸いです。
Magic CSS3 Animations
素晴らしいアニメーションエフェクトを手軽に実装できてしいまうライブラリー! 「これはマジックだ!」と独り言ちること間違いなしの最強ともいえるライブラリーです。
Magic CSS3 Animations
Animate.css
CSS3のアニメーション効果のすぐに使用できるライブラリ。その種類は60種類以上で、head内にanimate.min.cssを読み込み、効果に応じたクラス名をつけるだけで完了するお手軽さです。
Animate.css
Hover.css
ホバーエフェクトに特化したアニメーションエフェクトを実装できるスタイルシートです。アニメーションの種類は40種類以上で、head内にhover-min.cssを読み込み、クラス名を加えるだけで簡単に実装できてしまいます。
Hover.css
CSS3 Animation Cheat Sheet
CSSファイルを読み込んで、クラス名をつけるだけでアニメーションを実装できるスタイルシート。
アニメーションの種類は現在18種類です。
CSS3 Animation Cheat Sheet
Liffect
リスト要素を効果的に見せるためのCSSアニメーションライブラリーで、jQueryを必要とします。
Liffect
Effeckt.css
日常必要とするほとんどのアニメーションがリストアップされたサイト。海外の有名デザインブログで発表されているアイディア満点のエフェクトなども完全網羅。各見出し横に、ソース元のリンクがあるので、気になったエフェクトがあればソース元をチェックしてください。
Effeckt.css
Fancy Input
無味乾燥になりがちなフォームに、思わず入力したくなってしまう魅力的なエフェクトを加えてしまうjQueryプラグイン。アニメーションの種類は5種類です。
Fancy Input
Morf.js
複雑なCSSアニメーションも簡単に実装できてしまうjsライブラリ。エフェクトを選択すると、CSSが生成されます。
Morf.js
Easing Functions
イージングをともなったアニメーションをCSSやjsで実装するためのスニペットをまとめてくれているサイト。イージングの種類は30種類あります。jsで実装する場合は、jQuery Easing Pluginを利用します。
Easing Functions
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」
簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形
-
-
今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション
ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい
-
-
一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」
ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス
-
-
いまさら聞けない無料のアイコンフォントの導入の仕方・使い方
アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?
-
-
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定
-
-
UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」
UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl
-
-
1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」
CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co
-
-
WEBデベロッパーのためのおすすめYouTubeチャンネル15選
WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS
-
-
HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」
HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール