Animate.cssの使い方まとめ。サイトに手軽にアニメーションを実装 [CSS3ライブラリ]

リッチなUIのWEBサイトを簡単に実装できるCSSライブラリ「Animate.css」の実装手順、実現できるアニメーションの種類、テクニックを整理しました。

Pure CSSだけでも充分に動きのあるサイトを作ることができる時代になり、素敵なデザインのサイトやサービスが増えました。

ただし、自分でCSSを書くのは大変。便利なライブラリがあれば使いたいところです。本記事ではCSS3アニメーションのライブラリとしては最も有名だと思われる「Animate.css」について、利用手順・アニメーション種類・実装テクニックを整理しました

例えば、このような動きを簡単に実現することができます。

サンプル サンプル

 

Animate.cssのダウンロード(あるいはCDN記述)と設定方法。

Animate.cssの公式サイトからライブラリをダウンロードして自サーバに上げるか、あるいはCDNを利用して設定します。

Animate.css公式サイト

引用元:Animate.css https://daneden.github.io/animate.css/
サイト Animate.css公式サイト
チュートリアル GitHubのページに記載
ライセンス MIT

 

CSSファイルをダウンロードして設定する

  1. 公式サイトの「Download Animate.css」のリンクからCSSファイルをダウンロード
  2. 自分のサーバにダウンロードファイルをアップロードする
  3. HTMLのヘッダーに外部リソースとして読み込み設定する

 

CSSファイルをCDNを利用して設定する

  1. CDNをHTMLのヘッダーに外部リソースとして読み込み設定する

 

Animate.cssを有効活用するチュートリアル。

Animate.cssは様々なアニメーションが簡単に実装できますが、通常どおり設定するだけでは1度だけアニメーションするのみとなります。

そこで、後述するオプション「infinite」を使ってアニメーションを繰り返すように設定したり、jQuery/Javascriptを併用して必要な時にアニメーションするようにコントロールすることが実用的な使い方となります。

簡単で実践的な使い方のチュートリアルとして、以下のサンプルを紹介します。

基本的な使い方

サンプル

サンプル

HTMLサンプルコード ※ダブルクリックでコピペできます

 

基本的な使い方としては要素のclassに「animated」「※実装したいアニメーションのクラス名」「※オプション名」の3つを設定するだけです(アニメーションのクラス名やオプション名は後述の一覧にまとめています)

このサンプルでは「bounce」というアニメーションに、「infinite」というオプション(永久にアニメーションを繰り返すオプション)を付けています。

 

クリック時(.click)にアニメーションするように実装する

サンプル ※クリックで動作します

サンプル

HTMLサンプルコード ※ダブルクリックでコピペできます

スクリプトサンプルコード ※ダブルクリックでコピペできます

 

こちらはコントロールにクリックイベントを仕掛けています。クリックするとCSSが付与され、アニメーションが開始します(アニメーションを止めるのは実装していません)。

 

ホバー時(.hover)にアニメーションするように実装する

サンプル ※マウスホバーで動作します

サンプル

HTMLサンプルコード ※ダブルクリックでコピペできます

スクリプトサンプルコード ※ダブルクリックでコピペできます

 

こちらはコントロールにホバーイベントを仕掛けています。マウスホバーしているときは、アニメーションのクラスを付与し、ホバーが外れたタイミングで「removeClass」でアニメーションのCSSを除去しています。

 

本記事のサンプルではjQueryを利用しています。再現するにはHTMLのヘッダーにjqueryのCDNを設定するなどの対応が必要ですのでご注意ください。

 

Animate.cssで実現できるアニメーションの種類とオプション設定まとめ。

Animate.cssで実装できるアニメーションの種類一覧

bounce
サンプル
flash
サンプル
pulse
サンプル
rubberBand
サンプル
shake
サンプル
headShake
サンプル
swing
サンプル
tada
サンプル
wobble
サンプル
jello
サンプル
bounceIn
サンプル
bounceInDown
サンプル
bounceInLeft
サンプル
bounceInRight
サンプル
bounceInUp
サンプル
bounceOut
サンプル
bounceOutDown
サンプル
bounceOutLeft
サンプル
bounceOutRight
サンプル
bounceOutUp
サンプル
fadeIn
サンプル
fadeInDown
サンプル
fadeInDownBig
サンプル
fadeInLeft
サンプル
fadeInLeftBig
サンプル
fadeInRight
サンプル
fadeInRightBig
サンプル
fadeInUp
サンプル
fadeInUpBig
サンプル
fadeOut
サンプル
fadeOutDown
サンプル
fadeOutDownBig
サンプル
fadeOutLeft
サンプル
fadeOutLeftBig
サンプル
fadeOutRight
サンプル
fadeOutRightBig
サンプル
fadeOutUp
サンプル
fadeOutUpBig
サンプル
flipInX
サンプル
flipInY
サンプル
flipOutX
サンプル
flipOutY
サンプル
lightSpeedIn
サンプル
lightSpeedOut
サンプル
rotateIn
サンプル
rotateInDownLeft
サンプル
rotateInDownRight
サンプル
rotateInUpLeft
サンプル
rotateInUpRight
サンプル
rotateOut
サンプル
rotateOutDownLeft
サンプル
rotateOutDownRight
サンプル
rotateOutUpLeft
サンプル
rotateOutUpRight
サンプル
hinge
サンプル
jackInTheBox
サンプル
rollIn
サンプル
rollOut
サンプル
zoomIn
サンプル
zoomInDown
サンプル
zoomInLeft
サンプル
zoomInRight
サンプル
zoomInUp
サンプル
zoomOut
サンプル
zoomOutDown
サンプル
zoomOutLeft
サンプル
zoomOutRight
サンプル
zoomOutUp
サンプル
slideInDown
サンプル
slideInLeft
サンプル
slideInRight
サンプル
slideInUp
サンプル
slideOutDown
サンプル
slideOutLeft
サンプル
slideOutRight
サンプル
slideOutUp
サンプル
heartBeat
サンプル

設定できるオプション。

  • 「infinite」:アニメーションを繰り返す
  • 「delay-2s」「delay-3s」「delay-4s」「delay-5s」:X秒遅れて表示
  • 「slow」「slower」「fast」「faster」:アニメーションのスピード設定