CSSを記述するだけで簡単にアニメーションを実装できるAnimate.cssの使い方について紹介します。 関連：LottieでWebやAndroid、iOSアプリに簡単アニメーション実装
目次
CSSファイルの読み込み
ローカルで読み込む
下記リンク先からCSSファイルを保存して、ファイル名を「animate.min.css」と保存します。 https://raw.github.com/daneden/animate.css/master/animate.css ローカルで読み込む場合は下記のように記述します。
|
1 2 3 4 5 |
[sourcecode lang="html"] <head> <link rel="stylesheet" href="animate.min.css"> </head> [/sourcecode] |
CDNから読み込む
CDNからも読み込めるようになっており、下記の2つのいずれかの場所から読み込めます。
|
1 2 3 4 5 |
[sourcecode lang="html"] <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> [/sourcecode] |
|
1 2 3 4 5 |
[sourcecode lang="html"] <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.cs"> </head> [/sourcecode] |
記述の基本
下記ページにサンプルのデモがあります。 https://daneden.github.io/animate.css/ アクセスすると下記のような画面が表示されますが、「Animate it」をクリックすると「Animate.css」という文字が「bounce」の跳ねるアニメーションをします。bounceのプルダウンメニューをクリックすれば他にも多数のアニメーションサンプルが見れます。 
使用したいアニメーションがあったら、下記のように「animated」のクラス名と上記のデモに記載のサンプルのような「bounce」のアニメーション用のクラス名を2つ記述します。あとは、HTMLをリロードすればアニメーションの動きが見れます。
|
1 2 3 |
[sourcecode lang="html"] <div class="animated bounce">bounce</div> [/sourcecode] |
アニメーションのクラス名の一覧はこちらからも確認できます。 https://github.com/daneden/animate.css
アニメーションの繰り返し
基本的にアニメーションは1回のみの再生となっているので、アニメーションを繰り返したい場合にはクラス名に「infinite」を追記することで実現できます。
|
1 2 3 |
[sourcecode lang="html"] <div class="animated bounce infinite">bounce</div> [/sourcecode] |
CSSのプロパティを使って時間を制御
例えば、2秒遅らせてアニメーションをさせる、アニメーションを3回繰り替えさせたい場合はプロパティに下記のように記述します。
|
1 2 3 4 5 6 7 8 |
[sourcecode lang="css"] .block { /* 2秒遅れてアニメする */ animation-delay: 2s; /* 3回繰り返す infiniteを指定すると無限ループ*/ animation-iteration-count: 3; } [/sourcecode] |
|
1 2 3 |
[sourcecode lang="html"] <div class="block animated bounce">bounce</div> [/sourcecode] |
jQueryを使って制御
「Animate.css」は、jQueryを使って下記のように記述することでも制御ができます。
|
1 2 3 |
[sourcecode lang="javascript"] $('.box').addClass('animated shake'); [/sourcecode] |
jQueryを使ったサンプル
pulseの繰り返しアニメーションをしている緑のボタンをクリックすると、グレーのボックスがshakeするというサンプルデモを作ってみました。
See the Pen qMrGzg by maz (@maz777) on CodePen.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[sourcecode lang="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> [/sourcecode] |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[sourcecode lang="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; } [/sourcecode] |
JavaScript
|
1 2 3 4 5 6 7 8 9 |
[sourcecode lang="javascript"] $(function() { $('a.button').on('click', function() { $('.box').addClass('animated shake').one('animationend', function () { $('.box').removeClass('animated shake'); }); }); }); [/sourcecode] |
クリックでアニメーションするという動作は下記の記述で実現できますが、クリックでアニメーションするのは最初だけです。
|
1 2 3 4 5 6 7 |
[sourcecode lang="javascript"] $(function() { $('a.button').on('click', function() { $('.box').addClass('animated shake'); }); }); [/sourcecode] |
なので、下記の記述のようにアニメーションが終わったら、クラスを一旦取り除くという動作が必要になります。
|
1 2 3 4 5 |
[sourcecode lang="javascript"] one('animationend', function () { $('.box').removeClass('animated shake'); }); [/sourcecode] |
Wow.jsと組み合わせた使い方
Animate.css単独でもアニメーションは可能ですが、Wow.jsと組み合わせることで詳細なアニメーションが可能です。 下記ページからWow.jsをダウンロードします。 https://github.com/matthieua/WOW ダウンロードしたファイルの中に下記のファイルがありますので、読み込みます。（jQueryを読みこまなくても動作します。）
|
1 2 3 |
[sourcecode lang="html"] <script src="wow.min.js"></script> [/sourcecode] |
initメソッドを実行します。
|
1 2 3 |
[sourcecode lang="javascript"] new WOW().init(); [/sourcecode] |
基本的な使い方は、Animate.cssとほぼ同じです。クラス名に「wow slideInUp」のように記述します。
|
1 2 3 |
[sourcecode lang="text"] <a href="#" class="button wow slideInUp">Button</a> [/sourcecode] |
data属性を記述することで、さらに細かい制御ができます。
|
1 2 3 4 |
[sourcecode lang="html"] <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> [/sourcecode] |
- data-wow-duration
アニメーションの長さを変更する - data-wow-delay
アニメーション開始前の遅延 - data-wow-offset
アニメーションを開始する距離（ブラウザの下部から） - data-wow-iteration
アニメーションが繰り返される回数
