今夜はロールバック!

ただの日記です。

TOP

Animate.cssの便利な4つの使い方を解説!

f:id:momogaaaa:20180506135203j:plain

WebサイトやブログのHTML要素に、面白い動きを付けることでお馴染みのライブラリ、「Animate.css」の使い方を解説。

タイトルにあるように、4種類の使い方を紹介。

Animate.cssのライセンスはMIT。

 

Animate.cssの動かし方

手っ取り早く動かすには、cdnを使えばとりあえず動くものは作れる。

個人的には、npmで取得するのが一番楽だ。

また、今回のソースコードを動かすには、jQueryも必要なので忘れずにjQuery CDNから入れること。

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

 

アニメーションをループさせる

まず1つ目の使い方を紹介。

これが一番カンタンで、Animate.cssを使う上で一番標準的な使い方だ。

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

上記の「animated bounce」を指定することで、画面を開いたときに一度だけアニメーションが実行される。

そこに、「infinite」をつけることで、アニメーションをループさせることができる。

コチラでサンプルを作成してみた。

 

アニメーションの種類(bounceの代わり)は以下の通りだ。こちらは公式ページから引用。

Class Name      
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

 

アニメーションの回数、速度を変更

HTMLはこのように設定する。

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

limitationクラスに、アニメーションの回数と速度を指定する。

.limitation {
  animation-duration: 2s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

上記の設定で、アニメーションの実行時間は2秒、開始は2秒後、実行回数は無限となる。

実行回数を変更させたい場合は、~countの部分を回数に変更すること。

コチラ でサンプルを作成してみた。

 

クリック後にアニメーションを開始する

とあるイベント(例えばクリック)が発生した後に、アニメーションを開始する方法。

HTMLはこのように設定する。

<div id="animate1">AAA</div>

 

JavaScriptでコードを作成する必要がある。コードは公式ページから引用。

$(function() {
  $.fn.extend({
    animateCss: function (animationName) {
      var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
      this.addClass('animated ' + animationName).one(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
      });
      return this;
    }
  });
  $('#animate1').on('click',function(){
    $('#animate1').animateCss('bounce');
  });
});

コチラでサンプルを作成してみた。

要素をクリックした後に、アニメーションが一度のみ実行される。

 

アニメーションの終了を検知する

このように書くと、どのようなことがイマイチ伝わりにくいが、要は一つのアニメーションが終わった後に、次のアニメーションを動かすことができる。

先にサンプルを見た方が伝わりやすいだろうか。こちらのサンプルでは、縦に5回バウンドした後に、横にブルブルと震える。

これを実装するには、以下のソースが必要となる。

 

まず、HTMLはこのようにする。

<div id="detect" class="animated bounce">AAA</div>

JavaScriptは以下のようにする。

$(function() {

  var animationEnd = (function(el) {
    var animations = {
      animation: 'animationend',
      OAnimation: 'oAnimationEnd',
      MozAnimation: 'mozAnimationEnd',
      WebkitAnimation: 'webkitAnimationEnd',
    };

    for (var t in animations) {
      if (el.style[t] !== undefined) {
        return animations[t];
      }
    }
  })(document.createElement('div'));

  $.fn.extend({
    animateCss: function (animationName) {
      var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
      this.addClass('animated ' + animationName).one(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
      });
      return this;
    }
  });

  $('#detect').one(animationEnd, function(){
    $("#detect").removeClass("animated bounce");
    $('#detect').animateCss('shake');
  });

});

animationEndが、アニメーション終了を検知するものだ、終了を検知した後で次のアニメーションを設定している。

 

WebpackでAnimate.cssを使用する。

Animate.cssはWebpackからも使うことができる。

まずは、以下のようにnpmでAnimate.cssとjQueryをインストールする。

npm install animate.css --save

npm install jquery --save

 

その後、CSSファイル(例えば、style.css)などに以下を1文付け加えれば、Animate.cssを使用することができる。

@import "~animate.css/animate.css";

メインとなるJavaScriptファイルの先頭に以下の2つを入れて、CSSとjQueryが使えるようにする。

import './style.css';
var $ = require('jquery');

以下のライブラリを使えば、上記のようにCSSに@importしなくてもよいのだが、ライブラリの開発が2年前で止まっていることと、CSSの用意が不要になるだけと、メリットが少ないように感じるため、できることならAnimate.cssだけで使うようにした方がよいように感じた。

animate-css-webpack - npm

 

WebpackでAnimate.cssを使ったサンプルコードはコチラ

ローカルにダウンロードして、以下コマンドを実行すると、今回紹介したサンプルのWebページが起動する。

npm install
npm start

 

Animate.cssの公式ページ

Animate.css

GitHub - daneden/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

 

さいごに

Animate.cssはこのブログでも使用している。とても軽量でアニメーション自体も個人的には好みだ。

知名度も高いライブラリなので、使い方を覚えておくと色々な場面で役に立ちそうだ。