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

CSSアニメーションが簡単に利用できるAnimate.cssを使って、Webページにアニメーションを実装するチュートリアルを紹介します。

ページを表示した時に要素をアニメーションで表示、スクロールした時に要素をアニメーションで表示、フォームのエラーをアニメーションで表示など、最近見かけるアニメーションを実装する方法を詳しく解説します。

サイトのキャプチャ

Level Up Your Websites with Animate.css
by Hudson Allen


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Animate.cssとは

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

サイトのキャプチャ

Animate.css

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

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

Animate.cssの使い方: 準備

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. animation-duration
  2. animation-delay
  3. animation-iteration-count

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

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

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

この指定で、アローは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です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「.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を取り除きます。

実際の動作はデモページの最後、4つ目のセクションをご覧ください。

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

Animate.cssを使う時のポイントまとめ

ここまで学んだ、Animate.cssを使う時のポイントを要約します。

  1. 最初に、Animate.cssの準備と基本的な使い方を学びました。
  2. 続いて、スタティック・スクロール・クリックの3つの異なるアニメーションの使い方を学びました。
  3. 最後に、Animate.cssのライブラリにある面白いアニメーション(有用ではないかもしれないけど)の使い方を学びました。

このチュートリアルをあなたが楽しんで、Animate.cssをWebデザインに活用することを私は願っています。

top of page

©2017 coliss