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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」
ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな
-
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない
-
-
コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js
すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画
-
-
今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション
ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい
-
-
HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10
HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する
-
-
売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法
「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの
-
-
ショッピングカートだけの利用も無料!決済システムが充実したBASE(ベイス)が使える
無料でネットショップが開設できるBASE(ベイス)に、ショッピングカートだけの利用も無料というサービ
-
-
CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51
CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、
-
-
波打つようなクリックエフェクトを実装できる「Waves」
今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹
-
-
WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80
WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ