CSSを記述するだけで簡単にアニメーションを実装できるAnimate.cssの使い方について紹介します。 関連:LottieでWebやAndroid、iOSアプリに簡単アニメーション実装

CSSファイルの読み込み

ローカルで読み込む

下記リンク先からCSSファイルを保存して、ファイル名を「animate.min.css」と保存します。 https://raw.github.com/daneden/animate.css/master/animate.css ローカルで読み込む場合は下記のように記述します。

CDNから読み込む

CDNからも読み込めるようになっており、下記の2つのいずれかの場所から読み込めます。

記述の基本

下記ページにサンプルのデモがあります。 https://daneden.github.io/animate.css/ アクセスすると下記のような画面が表示されますが、「Animate it」をクリックすると「Animate.css」という文字が「bounce」の跳ねるアニメーションをします。bounceのプルダウンメニューをクリックすれば他にも多数のアニメーションサンプルが見れます。 Animate CSSの使い方 使用したいアニメーションがあったら、下記のように「animated」のクラス名と上記のデモに記載のサンプルのような「bounce」のアニメーション用のクラス名を2つ記述します。あとは、HTMLをリロードすればアニメーションの動きが見れます。

アニメーションのクラス名の一覧はこちらからも確認できます。 https://github.com/daneden/animate.css

アニメーションの繰り返し

基本的にアニメーションは1回のみの再生となっているので、アニメーションを繰り返したい場合にはクラス名に「infinite」を追記することで実現できます。

CSSのプロパティを使って時間を制御

例えば、2秒遅らせてアニメーションをさせる、アニメーションを3回繰り替えさせたい場合はプロパティに下記のように記述します。

jQueryを使って制御

「Animate.css」は、jQueryを使って下記のように記述することでも制御ができます。

jQueryを使ったサンプル

pulseの繰り返しアニメーションをしている緑のボタンをクリックすると、グレーのボックスがshakeするというサンプルデモを作ってみました。

See the Pen qMrGzg by maz (@maz777) on CodePen.

HTML

CSS

JavaScript

クリックでアニメーションするという動作は下記の記述で実現できますが、クリックでアニメーションするのは最初だけです。

なので、下記の記述のようにアニメーションが終わったら、クラスを一旦取り除くという動作が必要になります。

Wow.jsと組み合わせた使い方

Animate.css単独でもアニメーションは可能ですが、Wow.jsと組み合わせることで詳細なアニメーションが可能です。 下記ページからWow.jsをダウンロードします。 https://github.com/matthieua/WOW ダウンロードしたファイルの中に下記のファイルがありますので、読み込みます。(jQueryを読みこまなくても動作します。)

initメソッドを実行します。

基本的な使い方は、Animate.cssとほぼ同じです。クラス名に「wow slideInUp」のように記述します。

data属性を記述することで、さらに細かい制御ができます。

  • data-wow-duration
    アニメーションの長さを変更する
  • data-wow-delay
    アニメーション開始前の遅延
  • data-wow-offset
    アニメーションを開始する距離(ブラウザの下部から)
  • data-wow-iteration
    アニメーションが繰り返される回数

あわせて読みたい記事