CSSでアニメーションエフェクトを使うなら押さえておきたい!CSS3のアニメーションライブラリ5つまとめ

  • ブックマーク
  • Feedly

Animate.css

Animate.css

60種類以上の回転やフェードイン、フェードアウトなどのCSSアニメーションが用意されているライブラリです。LicenseはMITです。

Hover.css

Hover.css   A collection of CSS3 powered hover effects

48種類以上のホバーエフェクトがまとまったライブラリ。沢山の種類のホバーエフェクトがあるのでインスピレーションがかなり刺激されます。LicenseはMITです。

fancyInput

Fancy Input   CSS3 text typing effects for input fieldsこのライブラリはinput属性に対しエフェクトがかかるライブラリです。テキストエリアやテキストボックスに文字を入力する際にカッコイイエフェクトがかかります。

magic

Magic Animations CSS3

このライブラリはclassを与えるだけで様々エフェクトを適用することができます。デモサイトはBGMが流れるので注意が必要です。

Effeckt.css

Effeckt.css

モーダルダイアログ、キャプション、タブ、ボタンなど色々な要素にエフェクトをかけることができるライブラリ。インパクトの強いエフェクトをかけることができるので非常に印象に残ります。

[amazonjs asin=”4844363654″ locale=”JP” title=”HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。”]

[amazonjs asin=”4839943486″ locale=”JP” title=”よくわかるHTML5+CSS3の教科書”]

  • ブックマーク
  • Feedly

この記事を書いた人

藤 祐太郎

都内在住のWeb・アプリのディレクター。
都内Web制作会社勤務。
中規模~大規模サイトまでのディレクションを担当。現在は、アプリの開発ディレクションを担当する。

クライアントの課題解決に対して答えるべく日々活動している。