2018.09.11

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

CSSを記述するだけで簡単にアニメーションを実装できるAnimate.cssの使い方について紹介します。

CSSファイルの読み込み

ローカルで読み込む

下記リンク先からCSSファイルを保存して、ファイル名を「animate.min.css」と保存します。
https://raw.github.com/daneden/animate.css/master/animate.css

ローカルで読み込む場合は下記のように記述します。

<head>
<link rel="stylesheet" href="animate.min.css">
</head>

CDNから読み込む

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

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

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

記述の基本

下記ページにサンプルのデモがあります。
https://daneden.github.io/animate.css/

アクセスすると下記のような画面が表示されますが、「Animate it」をクリックすると「Animate.css」という文字が「bounce」の跳ねるアニメーションをします。bounceのプルダウンメニューをクリックすれば他にも多数のアニメーションサンプルが見れます。
Animate CSSの使い方

使用したいアニメーションがあったら、下記のように「animated」のクラス名と上記のデモに記載のサンプルのような「bounce」のアニメーション用のクラス名を2つ記述します。あとは、HTMLをリロードすればアニメーションの動きが見れます。

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

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

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

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

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

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

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

.block {
    /* 2秒遅れてアニメする */
    animation-delay: 2s;
    /* 3回繰り返す infiniteを指定すると無限ループ*/
    animation-iteration-count: 3;
}

<div class="block animated bounce">bounce</div>

jQueryを使って制御

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

$('.box').addClass('animated shake');

jQueryを使ったサンプル

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

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

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sample</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Animate CSS sample</h1>
  <a href="#" class="button animated pulse infinite">Button</a>
  <div class="box"><div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

a.button {
  background-color: #00bb00;
  text-decoration: none;
  border-radius: 3px;
  display: block;
  width: 70px;
  text-align: center;
  color: white;
}

.box {
  background-color: lightgray;
  display: block;
  width: 100px;
  height: 40px;
  text-align: center;
  margin-top: 50px;
}

JavaScript

$(function() {
    $('a.button').on('click', function() {
      $('.box').addClass('animated shake').one('animationend', function () {
        $('.box').removeClass('animated shake');
      });
    });
});

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

$(function() {
    $('a.button').on('click', function() {
      $('.box').addClass('animated shake');
    });
});

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

one('animationend', function () {
  $('.box').removeClass('animated shake');
});

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

Animate.css単独でもアニメーションは可能ですが、Wow.jsと組み合わせることで詳細なアニメーションが可能です。

下記ページからWow.jsをダウンロードします。
https://github.com/matthieua/WOW

ダウンロードしたファイルの中に下記のファイルがありますので、読み込みます。（jQueryを読みこまなくても動作します。）

<script src="wow.min.js"></script>

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

new WOW().init();

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

<a href="#" class="button wow slideInUp">Button</a>

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

<a href="#" class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></a>
<a href="#" class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></a>