Animate.css
共通classである.animated
と各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass(.infinite
)も用意されています。
76アニメーション用意されており、ライセンスはMITです。
cssanimation.io
基本的には共通classである.cssanimation
と各アニメーション用のclassを付与することで実装でき、アニメーションによってはさらにシーケンシャルまたはランダムのclassを記述する必要があります。
また、アニメーションをループさせるclass(.infinite
)も用意されています。
300以上のアニメーションが用意されており、ライセンスはMITです。
Dynamic.css
共通classである.dynamic
と各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass(.infinite
)も用意されています。
62アニメーション用意されており、ライセンスはMITです。
WickedCSS
適用したい要素に各アニメーション用のclassを付与することで実装できます。
24アニメーション用意されており、ライセンスはMITです。
mimic.css
適用したい要素に各アニメーション用のclassを付与することで実装でき、あわせて.animated
を付与するとanimation-fill-mode: both;
が指定された状態となります。
18アニメーション用意されており、ライセンスはMITです。
Vivify
共通classである.vivify
と各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass(.infinite
)も用意されています。
また、予めanimation-delay
とanimation-duration
を容易に指定できる用のclassが用意されており、animation-delay
であれば.delay-200
のように、animation-duration
であれば.duration-200
のようにそれぞれ指定します。
68アニメーション用意されており、ライセンスはMITです。
Motion CSS
各アニメーション用のclassを付与するだけでも実装できますが、.animation
も付与すればvisibility: visible;
とanimation-fill-mode: both;
も指定されます。
また、アニメーションをループさせるclass(.replay
)と少しですが容易にanimation-delay
が指定できるclass(.delay-05s
や.delay-2s
など)もあります。
90アニメーション用意されており、ライセンスはMITです。
magic
共通classである.magictime
と各アニメーション用のclassを付与することで実装できます。
65アニメーション用意されており、ライセンスはMITです。
Obnoxious.css
共通classである.animated
と各アニメーション用のclassを付与することで実装できます。
ライセンスはMITで、アニメーション数も5つとこれまで紹介してきたものより少ない印象ですが、どれも主張が強めのものになってます。
Tuesday
要素やモーダルなどを表示・非表示切り替えと相性が良さそうなものが中心で、共通classである.animated
と各アニメーション用のclassを付与することで実装できます。
また、アニメーションをループさせるclass(.infinite
)も用意されています。
29アニメーション用意されており、ライセンスはMITです。
Effeckt.css
こちらはとにかく様々なコンポーネント向けアニメーションが集められたものになり、ざっくりとしたカテゴリーとしてモーダル(2タイプ)・ボタン・リスト・リストスクロール・オフキャンバスナビ・ページ推移・キャプション表示・ツールチップ・フォーム要素・タブとなっています。
基本的にアニメーション指定はclassではなくdata
属性(data-effeckt-type
)で指定する形になっており、ライセンスはMITです。
CSShake
こちらはライブラリ名にもあるように、要素を細かく震わせたり揺り動かす動作を実装できるもので、共通classである.shake
と各アニメーション用のclassを付与することで実装できます。(.shake
単体でのアニメーション有)
アニメーションは.shake
または.shake
+αの指定のみの場合はhoverすると動き出すという形になっていますが、.shake-constant
を付与すると始めから動いている状態にすることが可能で、さらに.shake-constant
と一緒に.shake-constant--hover
を付与すれば、始めから動いている状態にして且つhoverで動作が停止されるようになります。
9アニメーション用意されており、ライセンスはMITです。
Hover.css
リンクやボタンといった要素に手軽にhoverエフェクトを実装することができるライブラリで、使用する際は.hvr-xxx
という感じでxxx
の部分を各アニメーション用のものに差し替えたclassを付与します。
ざっくりとしたカテゴリーとして要素全体にエフェクトをかけるもの・背景・アイコン・ボーダー・シャドウ&グロー・吹き出し・カールエフェクトがあり、アイコンは「Font Awesome」を利用しています。
ライセンスは個人・オープンソース利用であればMITですが、商用目的の場合はOEM商用ライセンスとなり購入の必要があります。
Imagehover.css
こちらはイメージにhoverした際のエフェクトを手軽に実装することができるライブラリで、使用する際は.imghvr-xxx
という感じでxxx
の部分を各アニメーション用のものに差し替えたclassを付与します。
44エフェクト用意されており、ライセンスはMITです。
また、有償ではありますがこのライブラリには拡張機能も用意されており、そちらを利用することで216エフェクト使用できるようになったり、class付与でエフェクトスピードを指定することができます。
アニメーション作成時に便利なジェネレータ
上で沢山のアニメーションライブラリを紹介しましたが、そこまで沢山必要なく自分が必要なアニメーションだけを手軽に実装したいというときは、以下のようなジェネレータが便利です。
いずれも用意されたアニメーションを選択したり、各種項目を任意で設定していくだけで、CSSアニメーションに必要なコードを出力してくれます。
Animista
予め用意された各種項目の中からアニメーションを選択し、さらにtiming-function
, delay
, fill-mode
など細かく指定することもできます。
作成したアニメーションの実装コードはウィンドウ右にあるアイコンをクリックすると表示され、コードはプレフィックスや圧縮の有無を選択できるようになっています。
WAIT! Animate
上で紹介した「Animista」に比べると少ない印象ではありますが、こちらもアニメーションを選択するとその動きを実装するために必要なCSSを出力してくれます。
ページ上部では14種類のアニメーション+任意の時間指定のコードが出力され、その下にあるセクションでは全体的に任意で各項目を調整したものがコードとして出力されるようになっています。