簡単にアニメーションを実装できるAnimate.cssの使い方

手軽に実装できるアニメーションってない？

便利ライブラリがあるよ！

今回ご紹介するのはCSSライブラリなので、class名を付けるだけでアニメーションを実装出来ます。

効率よくコーディングしたい人はこちら

Animate.cssを読み込む

Animate.cssを読み込む方法は2つあります。

今回はCDNで読み込む方法で進めていきます。

CDNで読み込む

以下のコードをheadタグに入れます。

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css"
/>

これだけです。

※最新バージョンは4ですが、4だとiPhoneで動かなかったのでバージョン3にしています。
また3.6.2ではなく3.7.0だと動かない機種もあるようです（自分のiPhone8は動きませんでした）

Animate.cssの使い方

まずはアニメーションを見てみます。

See the Pen
Animate.css by junpei (@junpei-sugiyama)
on CodePen.

全種類載せたらカオスな状態になったので、一部だけにします。

コード解説

まずは先ほどのアニーションからHTMLを見てみます（上から3つだけ）

<div class="box animated bounce infinite">bounce</div>
<div class="box animated flash infinite">flash</div>
<div class="box animated pulse infinite">pulse</div>

class名の解説をします（boxは緑のボックス用のclassです）

infinite に関してはループさせる必要がなければ外してOKです。

アニメーションの種類については以下のサイトの右側にあります。

Animate.css

ここに並んでいるのがアニメーション名となります。

カーソルを載せると右側にアイコンが表示されるので、ここをクリックすればアニメーション名をコピーできます。

さらにアニメーション名をクリックすればアニメーションの確認が出来ます。

※バージョン3だと動かないアニメーションもあるようです。

アニメーション開始のタイミング

デフォルトはページを開いた直後に動き出しますが、このタイミングをAnimate.cssが用意しているclass名を使うと2秒から5秒まで1秒刻みで設定可能です。

以下のclass名を追加すればOKです。

ちなみに6sとかにしても6秒後とかなりません（2,3,4,5のみ）

こちらがサンプルになります（右下のRerunをクリックでリロードされます）

See the Pen
Animate.css（delay） by junpei (@junpei-sugiyama)
on CodePen.

ただ以下のように要素に任意のclass名を付けてcssでanimation-delayを設定すれば1秒後、6秒後、0.5秒後など自由に設定可能です。

<div class="box delay01 animated bounce infinite">bounce</div>

.delay01 {
  animation-delay: 0.5s;
}

こちらの方が細かく設定出来るのでこちらの方が良いかも知れません。

また、animation-iteration-countを使うとアニメーションの回数を設定可能です。

<div class="box delay01 animated bounce">bounce</div>

.delay01 {
  animation-iteration-count: 3;
}

このようにすれば3回でアニメーションは止まります（無限ループさせるinfiniteを消すのをお忘れなく）

カスタマイズ

まずはコチラのフェードインを見て下さい。

See the Pen
Animate.css（カスタマイズ前） by junpei (@junpei-sugiyama)
on CodePen.

結構動きが大きく感じるので、この動きを小さくしたいと思います。

これを変更するにはanimate.cssに書いてあるコード調べます。

そのコードを知るにはファイルをダウンロードする必要があります（今回はCDNで使用しているのでファイルは必要ありませんが）

まずはGitHubのページからファイルをダウンロードします。

ファイルと解凍すると色々入っていますが、class名を知るのに必要なファイルはanimate.cssになります。

今回編集したいアニメーション名は fadeInUp になります。

これをanimate.cssで探します。

そしてこちらが該当する箇所になります。

この赤枠部分を編集するのですが、今回はCDNを使用しているのでanimate.cssを直接編集することは出来ません（CDNを使用していなくても直接編集はしない方がいいと思いますが）

なのでこれをベースとして新しいアニメーションを作成します。

それがこちらになります。

これをstyle.cssなどに書きます。

そして動きを小さくしたのがこちらになります。

See the Pen
Animate.css（カスタマイズ後） by junpei (@junpei-sugiyama)
on CodePen.

CSSだけでなく、HTMLのclass名も変えるのを忘れないようにしましょう。

クリックやホバーでアニメーションさせる

先ほどまではCSSのみでしたが、jQueryを使えばクリックやホバーのタイミングアニメーションを実行させることが出来ます。

まずはサンプルを見てみます。

See the Pen
Animate.css（click＆hover） by junpei (@junpei-sugiyama)
on CodePen.

HTMLはこのようにしました。

<div class="box js-click animated">click<br>bounce</div>
<div class="box js-hover animated">hover<br>bounce</div>

1行目がクリックでアニメーション、2行目がホバーでアニメーションとなります。

次にjQueryを見てみます。

//クリックするとアニメーション
$(function () {
  $(".js-click").on("click", function () {
    $(".js-click")
      .addClass("bounce")
      .one("animationend", function () {
        $(".js-click").removeClass("bounce");
      });
  });
});
//ホバーするとアニメーション
$(function () {
  $(".js-hover").hover(
    function () {
      $(".js-hover").addClass("bounce");
    },
    function () {
      $(".js-hover").removeClass("bounce");
    }
  );
});

「js-」というclass名はそれぞれアニメーションを適用させたいclass名が入ります（「js-」というclass名である必要はありません）

「animate__〇〇」はアニメーション名が入ります。

6行目は一度だけ（one）アニメーションが終わったら（animationend）という意味になります。

なので7行目はアニメーションが終わったら一度だけアニメーション名のclassを外すとなります。そうしないと2回目以降クリックしてもアニメーションが発生しなくなりますからね。

以上です。

アニメーションの種類はもっとたくさんあるので、いろいろ試してみるといいかと思います。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック