実務で役に立ちまくり!フリーのCSSアニメーション ライブラリ5選!

昨今のサイト制作ではアニメーションがほぼ必須になってきています。
どんなWEBサイトでも必ずどこかに動きがありますよね。

ただアニメーションって動きが重くページ表示スピードに大きく関わってきます。
特に直近ではGoogleのスピードアップデートにより、SEO的にもページ表示速度は重要なものになりました。

そこで今回は動きも軽くコードを追加するだけでラクラク表現出来るCSSアニメーションがたくさん詰まった、オススメのCSSアニメーション ライブラリをご紹介いたします。
お気に入り必須です!!

Animate.css

f:id:mamegoro:20180803182120j:plain

Animate.cssは人気のライブラリの1つ。インタフェースが非常に分かりやすいです。
また新しいものの追加も随時されておりオススメです。

サイトはこちら

Bounce.js

f:id:mamegoro:20180803182128j:plain

jsを使用していますが動きは軽く、他のサイトと比べてもアニメーションの動きが非常に滑らかです。
他にはないような動きが多数収録されています。

サイトはこちら

GSAP Library

f:id:mamegoro:20180803182135j:plain

HTML5とJSを組み合わせた非常に軽微なアニメーションに特価したライブラリです。

サイトはこちら

Wicked CSS

f:id:mamegoro:20180803182141j:plain

面白い動きをするCSSライブラリ。
UIも分かりやすく、プレビューで簡単に動作の確認ができます。

サイトはこちら

Tuesday

f:id:mamegoro:20180803182147j:plain

要素のイン、アウトに特化したライブラリ。
使いやすいものに特化しています。

サイトはこちら