Webサイトやブログで使えるCSSアニメーションのテクニック！Animate.cssでの実装方法を詳しく解説

サイト構築 -CSS

Post on:2017年9月7日

Animate.cssとは

Animate.cssは外部スタイルシートを1つ加えるだけで、任意の要素に簡単にアニメーションを適用できます。

Animate.css

しかし、そのまま要素を動かすだけでは、意味がありません。

ここでは、Webページを魅力的にするアニメーションを実装する方法をチュートリアル形式で紹介します。

Animate.cssの使い方: 準備

Animate.cssを利用するには、2つの方法があります。

1. ファイルをダウンロードして利用する

Animate.cssの公式サイトの「Download Animate.css」からCSSファイルをダウンロードし、HTMLに外部ファイルとして記述します。

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

<head>

</head>

※Animate.cssで必要なファイルは、1つだけです。

2. CDNのファイルを利用する

CDNを利用し、HTMLに外部ファイルとして記述します。
ファイルは、Animate.css -cdnjsで見つかります。

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

<head>

</head>

準備はこれで完了です！
Animate.cssの素晴らしいアニメーションを利用するために、これ以上の準備は必要ありません。

Animate.cssの使い方: シンプルなアニメーション

最初は、ページがロードされた時に要素がアニメーションする、スタティックなアニメーションを実装してみましょう。このタイプのアニメーションは通常、ページの最上部でよく見かけるもので、表示された際に一度だけアニメーションします。

具体的には、ページの最上部にフルスクリーンのヒーロー要素を配置し、ロードされた時にそれらの要素をアニメーションで動かします。HTMLはシンプルです。

<header>
  <h1>Animate.css</h1>
  <h2>Level Up Your Websites with Animate.css</h2>
</header>

<h1>Animate.css</h1>

<h2>Level Up Your Websites with Animate.css</h2>

</header>

h1, h2の2つの見出しのclassに「animated」と「bounceInDown」を加えます。
「animated」は、Animate.cssを使うために必ず必要です。「bounceInDown」はアニメーションの種類で、さまざまな動きが用意されています。
アニメーションの種類は、Animate.css -GitHubに一覧があります。

<header>
  <h1 class="animated bounceInDown">Animate.css</h1>
  <h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
</header>

<h1 class="animated bounceInDown">Animate.css</h1>

<h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>

</header>

これでもいいですが、もう少し機能を加えてみましょう。
下にスクロールしてコンテンツを見てもらうために、下方向にバウンドするアローを加えます。このアローにも2つのclassを加えます。

<header>
  <h1 class="animated bounceInDown">Animate.css</h1>
  <h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
  <span class="animated bounce"></span>
</header>

<h1 class="animated bounceInDown">Animate.css</h1>

<h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>

</header>

ここまでの実装でアニメーションは、一度だけ動きます。しかし、バウンドするアローは繰り返しアニメーションさせたいですよね。
Animate.cssでは回数や時間などを設定できるオプションが用意されています。

animation-duration
animation-delay
animation-iteration-count

アローのアニメーションを間隔と回数を変更するために、1と3のプロパティを使用します。

念のため、HTMLを確認しておきましょう。

<header>
  <h1 class="animated bounceInDown">Animate.css</h1>
  <h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
  <span class="animated bounce"></span>
</header>

<h1 class="animated bounceInDown">Animate.css</h1>

<h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>

</header>

アローだけに、アニメーションのオプションを指定します。

/* Make sure to use the animated class in your selector. Otherwise, the animation-duration won't work */
header span.animated {
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

/* Make sure to use the animated class in your selector. Otherwise, the animation-duration won't work */

header span.animated {

animation-duration: 2.5s;

animation-iteration-count: infinite;

}

この指定で、アローは2.5秒間隔で、永遠にアニメーションします。

実際のアニメーションは、下記のデモでご覧ください。

See the Pen Animate.css (Part 1) by Hudson Taylor (@Hudson_Taylor11) on CodePen.

スタティックなアニメーションを実装するのは、非常に簡単です。
次のセクションでは、jQueryを使用してAnimate.cssを動的にトリガーすることによって、いくつかの複雑さを加えてみます。

Animate.cssの使い方: スクロールでアニメーション

わたし達が目にする印象的なアニメーションの一つ目は、スクロールアニメーションです。jQueryを使用すると、ほんの数行で要素がビューポートにあるか調べることができます。あとは、Animate.cssのclassを加えるだけです。

ここでは、アイコンとテキストを配置した3つのブロックを使用します。まずは、基本となるHTMLです。

<h2 class="new-section">Scroll Animations</h2>
<div class="scroll-animations">
  <div class="animated">
    <span>☎</span>
    <h3>Number One</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>
  </div>
  <div class="animated">
    <span>♫</span>
    <h3>Number Two</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>
  </div>
  <div class="animated">
    <span>☂</span>
    <h3>Number Three</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>
  </div>
</div>

<h2 class="new-section">Scroll Animations</h2>

<h3>Number One</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>

</div>

<h3>Number Two</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>

</div>

<h3>Number Three</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>

</div>

jQueryで要素がスクロールして、ビューポートに表示されたかどうか調べます。下記のコードはコピペで簡単に利用できます。

コードでは、ユーザーがスクロールした距離、ウィンドウの高さ、およびこれを計算するための要素の上からのオフセットを使用しています。scrollイベントとこの関数を使用して、「fadeInLeft」を要素のclassに自動的に加えます。

// Scroll function courtesy of Scott Dowding; http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling

$(document).ready(function() {
  // Check if element is scrolled into view
  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
  // If element is scrolled into view, fade it in
  $(window).scroll(function() {
    $('.scroll-animations .animated').each(function() {
      if (isScrolledIntoView(this) === true) {
        $(this).addClass('fadeInLeft');
      }
    });
  });
});

// Scroll function courtesy of Scott Dowding; http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling

$(document).ready(function() {

// Check if element is scrolled into view

function isScrolledIntoView(elem) {

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;

var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

}

// If element is scrolled into view, fade it in

$(window).scroll(function() {

$('.scroll-animations .animated').each(function() {

if (isScrolledIntoView(this) === true) {

$(this).addClass('fadeInLeft');

}

});

実際のアニメーションは、下記のデモでご覧ください。

さきほどのヒーロー要素から下にスクロールすると、アイコンとテキストを配置したブロックがあり、これら3つのブロックはスクロールに伴い、それぞれ表示されます。

See the Pen Animate.css (Part 2) by Hudson Taylor (@Hudson_Taylor11) on CodePen.

次のセクションでは、クリックをトリガーしたアニメーションを実装してみます。

Animate.cssの使い方: クリックでアニメーション

クリックをトリガーにしたアニメーションは、お問い合わせフォームに実装してみます。フォームが送信される時に、jQueryで入力欄が空欄かどうかチェックします。空欄だった場合は、そこにレッドのボーダーを加え、ユーザーにエラーであることを知らせます。

まずは、基本的なHTMLです。

<div class="click-animations">
  <h2 class="new-section">Click Animations</h2>
  <form>
    <input type="text" placeholder="Name" id="name" />
    <input type="text" placeholder="Email" id="email" />
    <textarea rows="7" placeholder="Message" id="message"></textarea>
  </form>
  <button>Send</button>
</div>

<h2 class="new-section">Click Animations</h2>

<form>

</form>

</div>

よく見かけるフォームの実装ですね、簡単です。
あとは今までと同じように、classを加えるだけです。

少し注意点があります。
スクロールでは、スクロールしてからアニメーションを一度だけ実行する必要がありました。しかし、同じにすると、期待通りにアニメーションしません。下記はその問題点です。

2回目以降はアニメーションしない

送信ボタンを最初にクリックした時にはアニメーションが適用されますが、その後は適用されません。この原因は、1回目にclassが加えられた時にはアニメーション化されますが、2回目以降はclassが加えられていないからです。つまり、最初にアニメーションした後にそのclassを取り除く必要があります。そして、2回目以降に再び加えます。

この問題を解決するためにJavaScriptを使用して、アニメーションの終了を確認してからclassを再び加えることができます。

$('#myElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    // do something
});

$('#myElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

// do something

});

「.one()」は「.on()」と基本的には同じです。
参考: .one() -jQuery API Documentation

この便利なjQueryのメソッドを使用して、ロジックを見てみましょう。

送信ボタンがクリックされると、空のinput要素を確認します。
空であれば、class（アニメーションやエラー表示）を加えます。
最後にアニメーションが終了した時に、加えたclassを取り除きます。

これらの3つのロジックを達成するために、各フォーム要素を検証するためにif文を使用してon click関数を作成します。また、イベントリスナーを使用して、アニメーションを繰り返し実行することもできます。
これらすべてをまとめると、JavaScriptは下記のようになります。

// Click Animations
$('button').on('click', function() {
    /*
    If any input is empty make it's border red and shake it. After the animation is complete, remove the shake and animated classes so that the animation can repeat.
    */

    // Check name input
    if ($('#name').val() === '') {
        $('#name').addClass('form-error animated shake')
                  .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                        $(this).removeClass('animated shake');
        });
    } else {
        $('#name').removeClass('form-error');
    }

    // Check email input
    if ($('#email').val() === '') {
        $('#email').addClass('form-error animated shake')
                   .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                        $(this).removeClass('animated shake');
        });
    } else {
        $('#email').removeClass('form-error');
    }

    // Check message textarea
    if ($('#message').val() === '') {
        $('#message').addClass('form-error animated shake')
                     .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                        $(this).removeClass('animated shake');
        });
    } else {
        $('#message').removeClass('form-error');
    }
});

// Click Animations

$('button').on('click', function() {

If any input is empty make it's border red and shake it. After the animation is complete, remove the shake and animated classes so that the animation can repeat.

// Check name input

if ($('#name').val() === '') {

$('#name').addClass('form-error animated shake')

.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

$(this).removeClass('animated shake');

});

} else {

$('#name').removeClass('form-error');

}

// Check email input

if ($('#email').val() === '') {

$('#email').addClass('form-error animated shake')

.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

$(this).removeClass('animated shake');

});

} else {

$('#email').removeClass('form-error');

}

// Check message textarea

if ($('#message').val() === '') {

$('#message').addClass('form-error animated shake')

.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

$(this).removeClass('animated shake');

});

} else {

$('#message').removeClass('form-error');

}

});

「.form-error」はエラー表示用で、入力欄にレッドのボーダーを適用するだけです。

空欄があった場合、どのようにアニメーションするかは下記のデモでご覧ください。

See the Pen Animate.css (Part 3) by Hudson Taylor (@Hudson_Taylor11) on CodePen.

Animate.cssの使い方: 面白いアニメーション

ここまでスタティックなアニメーション、スクロールでアニメーション、クリックでアニメーションと学んできました。最後はボーナスのセクションとして、Animate.cssが持つ面白いアニメーションを楽しんでみましょう。実際のサイトで使いどころは限定されますが、コードを触るのが楽しいと思います。

Animation.cssのサイトを見ると、「Special」というカテゴリがあるのに気がつくでしょう。この中には面白いアニメーションが用意されており、その中から「hinge」を使用してみます。

「hinge」は蝶番のアニメーションです。
ここでは要素をクリックしたら、その要素を蝶番のように動かしてみます。実装はこれまでと同じように、クリックした際にclassを加え、終了後にclassを取り除きます。

// Activate hinge effect when h4 is click in last section
$('.funky-animations h4').on('click', function() {
    $(this).addClass('animated hinge').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(this).removeClass('animated hinge');
    });
});

// Activate hinge effect when h4 is click in last section

$('.funky-animations h4').on('click', function() {