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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
twitterでのキーワードのひろがりを調べられるツール「twimp」
twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した
-
-
HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup
HTML,CSS,JSのコードを美しく整形し、?部分の指摘もしてくれるDirty Markupをご紹
-
-
レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW
-
-
クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」
CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos
-
-
CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!
CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC
-
-
CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51
CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、
-
-
Chromeのタブをクリックするだけで音声を消す方法
Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの
-
-
HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10
HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する
-
-
月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12
ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし
-
-
CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19
CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現