CSS
便利すぎるCSSアニメーションライブラリ10選まとめ【クラス付与だけ！】
2018年11月21日 8:00
おはようございます！社員Aです👩
今回はWEB制作に便利な、CSSアニメーションライブラリをまとめました。
CSSアニメーションは自分で設定すると結構面倒なのですが、ライブラリを使うと簡単に実装できるのでおすすめです。
もくじ
Hover.css
私もよく使っているライブラリで、このブログを実装するときにも使用しました。
クラス付与だけで様々なアニメーションを実装することができるのと、アニメーションの種類が豊富なためどんなテイストのWEBサイトでも幅広く使える点が気に入っています。
ちょっとしたアニメーションから、アイコン・シャドウ・吹き出し・カールなどこれ一つで対応できることが多いです。
公式サイトで全種類のアニメーションのデモをご覧いただけます。
Animate.css
こちらも手軽にCSSアニメーションが実装できることで有名な「Animate.css」です。
とにかく種類が多く、アニメーションを実装したい要素に「animated」とアニメーションの種類のクラスを付与するだけで実装できます。
公式サイトで、アニメーションのデモがご覧いただけます。
Vivify
「Animate.css」と同じくクラス付与だけでアニメーションを実装できます。
アニメーションの数も豊富で、CSSのサイズも軽量なのが特徴です。
こちらも公式サイトで全種類のアニメーションのデモがご覧いただけます。
Obnoxious.CSS
こちらは上記3つとは違い、ユニークな5種類のアニメーションが実装できます。
公式のデモをご覧いただくとわかるのですが、クセが強い！！（笑）
オリジナル感やインパクトを出したいサイトでの実装におすすめのライブラリです。
Tuesday
シンプルでどのサイトでも活用できそうなアニメーションが揃っています。
デモサイトでは、表示のされ方と消え方をご覧いただけます。
とてもシンプルなので、他のライブラリと組み合わせての実装もできそうです。
Magic Animations
hover.cssに似ているCSSアニメーションライブラリです。
他サイトでもよく見かけるアニメーションが揃っています。
公式サイトで全種類のアニメーションのデモをご覧いただけます。
Wicked CSS
シンプルで汎用性の高いCSSアニメーションライブラリです。
そんなに凝ったアニメーションじゃなくて良い！という方はこちらのライブラリをおすすめします。
こちらも公式サイトにデモがあり、アニメーション名をクリックするときのこのキャラクターがアニメーションされるようになっています。
CSShake
シェイクアニメーション（ぶるぶると震えるアニメーション）に特化したアニメーションライブラリです。
全部で10種類のシェイクアニメーションが揃っており、特に「Crazy Shake」は本当にクレイジーなくらいシェイクします（笑）
シェイクアニメーションを実装したい方におすすめです。
Motion CSS
全部で90種類ものアニメーションが揃っているCSSアニメーションライブラリです。
各アニメーションのクラス名を付与で実装できるだけでなく、下記のオプションも指定できるクラスも用意されています。
- アニメーションをループさせることのできるクラス「.replay」
- アニメーションがいつ始まるかを指定する「.delay-05」ほか
Imagehover.css
画像のCSSアニメーションに特化しており、画像のhover時のアニメーションとして使えるものが豊富に揃っています。
無料版では44つのエフェクトが揃っており、有償版ではさらに多くのエフェクト（216種類）が使用できるようになります。
そしてライブラリ自体も19KBと軽量なのが素晴らしいですね！
まとめ
CSSアニメーションは複雑になるほど、自分で実装するのが面倒ですが上記のライブラリを活用することで、クラス付与だけで簡単にCSSアニメーションを実装できるのが良いですね。
使いすぎると鬱陶しく感じてしまうアニメーションですが、バランスよく使えばユーザーにインパクトを与えることが出来ます。
また、こういったライブラリを使用する時はやはりどれほど軽量化されているかも確認しながら使うのがベストだと思いました。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
