CSSアニメーションを簡単に実装できるライブラリ 10+

CSSアニメーションを簡単に実装できるライブラリ 10+

ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。
いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。
また、簡単な操作でCSSアニメーションを実装するのに必要なコードを出力してくれる便利なジェネレータも併せて紹介します。

Animate.css

Animate.css

共通classである.animatedと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass(.infinite)も用意されています。
76アニメーション用意されており、ライセンスはMITです。

cssanimation.io

cssanimation.io

基本的には共通classである.cssanimationと各アニメーション用のclassを付与することで実装でき、アニメーションによってはさらにシーケンシャルまたはランダムのclassを記述する必要があります。
また、アニメーションをループさせるclass(.infinite)も用意されています。
300以上のアニメーションが用意されており、ライセンスはMITです。

Dynamic.css

Dynamic.css

共通classである.dynamicと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass(.infinite)も用意されています。
62アニメーション用意されており、ライセンスはMITです。

WickedCSS

WickedCSS

適用したい要素に各アニメーション用のclassを付与することで実装できます。
24アニメーション用意されており、ライセンスはMITです。

mimic.css

mimic.css

適用したい要素に各アニメーション用のclassを付与することで実装でき、あわせて.animatedを付与するとanimation-fill-mode: both;が指定された状態となります。
18アニメーション用意されており、ライセンスはMITです。

Vivify

Vivify

共通classである.vivifyと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass(.infinite)も用意されています。
また、予めanimation-delayanimation-durationを容易に指定できる用のclassが用意されており、animation-delayであれば.delay-200のように、animation-durationであれば.duration-200のようにそれぞれ指定します。
68アニメーション用意されており、ライセンスはMITです。

Motion CSS

Motion CSS

各アニメーション用のclassを付与するだけでも実装できますが、.animationも付与すればvisibility: visible;animation-fill-mode: both;も指定されます。
また、アニメーションをループさせるclass(.replay)と少しですが容易にanimation-delayが指定できるclass(.delay-05s.delay-2sなど)もあります。
90アニメーション用意されており、ライセンスはMITです。

magic

magic

共通classである.magictimeと各アニメーション用のclassを付与することで実装できます。
65アニメーション用意されており、ライセンスはMITです。

Obnoxious.css

Obnoxious.css

共通classである.animatedと各アニメーション用のclassを付与することで実装できます。
ライセンスはMITで、アニメーション数も5つとこれまで紹介してきたものより少ない印象ですが、どれも主張が強めのものになってます。

Tuesday

Tuesday

要素やモーダルなどを表示・非表示切り替えと相性が良さそうなものが中心で、共通classである.animatedと各アニメーション用のclassを付与することで実装できます。
また、アニメーションをループさせるclass(.infinite)も用意されています。
29アニメーション用意されており、ライセンスはMITです。

Effeckt.css

Effeckt.css

こちらはとにかく様々なコンポーネント向けアニメーションが集められたものになり、ざっくりとしたカテゴリーとしてモーダル(2タイプ)・ボタン・リスト・リストスクロール・オフキャンバスナビ・ページ推移・キャプション表示・ツールチップ・フォーム要素・タブとなっています。
基本的にアニメーション指定はclassではなくdata属性(data-effeckt-type)で指定する形になっており、ライセンスはMITです。

CSShake

CSShake

こちらはライブラリ名にもあるように、要素を細かく震わせたり揺り動かす動作を実装できるもので、共通classである.shakeと各アニメーション用のclassを付与することで実装できます。(.shake単体でのアニメーション有)
アニメーションは.shakeまたは.shake+αの指定のみの場合はhoverすると動き出すという形になっていますが、.shake-constantを付与すると始めから動いている状態にすることが可能で、さらに.shake-constantと一緒に.shake-constant--hoverを付与すれば、始めから動いている状態にして且つhoverで動作が停止されるようになります。
9アニメーション用意されており、ライセンスはMITです。

Hover.css

Hover.css

リンクやボタンといった要素に手軽にhoverエフェクトを実装することができるライブラリで、使用する際は.hvr-xxxという感じでxxxの部分を各アニメーション用のものに差し替えたclassを付与します。
ざっくりとしたカテゴリーとして要素全体にエフェクトをかけるもの・背景・アイコン・ボーダー・シャドウ&グロー・吹き出し・カールエフェクトがあり、アイコンは「Font Awesome」を利用しています。
ライセンスは個人・オープンソース利用であればMITですが、商用目的の場合はOEM商用ライセンスとなり購入の必要があります。

Imagehover.css

Imagehover.css

こちらはイメージにhoverした際のエフェクトを手軽に実装することができるライブラリで、使用する際は.imghvr-xxxという感じでxxxの部分を各アニメーション用のものに差し替えたclassを付与します。
44エフェクト用意されており、ライセンスはMITです。
また、有償ではありますがこのライブラリには拡張機能も用意されており、そちらを利用することで216エフェクト使用できるようになったり、class付与でエフェクトスピードを指定することができます。

アニメーション作成時に便利なジェネレータ

上で沢山のアニメーションライブラリを紹介しましたが、そこまで沢山必要なく自分が必要なアニメーションだけを手軽に実装したいというときは、以下のようなジェネレータが便利です。
いずれも用意されたアニメーションを選択したり、各種項目を任意で設定していくだけで、CSSアニメーションに必要なコードを出力してくれます。

Animista

Animista

予め用意された各種項目の中からアニメーションを選択し、さらにtiming-function, delay, fill-modeなど細かく指定することもできます。
作成したアニメーションの実装コードはウィンドウ右にあるアイコンをクリックすると表示され、コードはプレフィックスや圧縮の有無を選択できるようになっています。

WAIT! Animate

WAIT! Animate

上で紹介した「Animista」に比べると少ない印象ではありますが、こちらもアニメーションを選択するとその動きを実装するために必要なCSSを出力してくれます。
ページ上部では14種類のアニメーション+任意の時間指定のコードが出力され、その下にあるセクションでは全体的に任意で各項目を調整したものがコードとして出力されるようになっています。

Close the search window,
please press close button or esc key.