便利すぎるCSSアニメーションライブラリ10選まとめ【クラス付与だけ!】

CSS

便利すぎるCSSアニメーションライブラリ10選まとめ【クラス付与だけ!】

2018年11月21日 8:00 

便利すぎるCSSアニメーションライブラリ10選まとめ【クラス付与だけ!】

おはようございます!社員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アニメーションライブラリです。

各アニメーションのクラス名を付与で実装できるだけでなく、下記のオプションも指定できるクラスも用意されています。

  1. アニメーションをループさせることのできるクラス「.replay」
  2. アニメーションがいつ始まるかを指定する「.delay-05」ほか

 

Imagehover.css

画像のCSSアニメーションに特化しており、画像のhover時のアニメーションとして使えるものが豊富に揃っています。

無料版では44つのエフェクトが揃っており、有償版ではさらに多くのエフェクト(216種類)が使用できるようになります。

そしてライブラリ自体も19KBと軽量なのが素晴らしいですね!

 

まとめ

CSSアニメーションは複雑になるほど、自分で実装するのが面倒ですが上記のライブラリを活用することで、クラス付与だけで簡単にCSSアニメーションを実装できるのが良いですね。

使いすぎると鬱陶しく感じてしまうアニメーションですが、バランスよく使えばユーザーにインパクトを与えることが出来ます。

また、こういったライブラリを使用する時はやはりどれほど軽量化されているかも確認しながら使うのがベストだと思いました。

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!