on:2017年9月7日sponsorsCSSアニメーションが簡単に利用できるAnimate.cssを使って、Webページにアニメーションを実装するチュートリアルを紹介します。ページを表示した時に要素をアニメーションで表示、スクロールした時に要素をアニメーションで表示、フォームのエラーをアニメーションで表示など、最近見かけるアニメーションを実装する方法を詳しく解説します。Allen下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。面白いアニメーションAnimate.cssを使う時のポイントまとめAnimate.cssとはAnimate.cssは外部スタイルシートを1つ加えるだけで、任意の要素に簡単にアニメーションを適用できます。Animate.cssしかし、そのまま要素を動かすだけでは、意味がありません。ここでは、Webページを魅力的にするアニメーションを実装する方法をチュートリアル形式で紹介します。準備Animate.cssを利用するには、2つの方法があります。Animate.css」からCSSファイルをダウンロードし、HTMLに外部ファイルとして記述します。href="animate.css"></head>※Animate.cssで必要なファイルは、1つだけです。CDNのファイルを利用するCDNを利用し、HTMLに外部ファイルとして記述します。-cdnjsで見つかります。href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css"></head>準備はこれで完了です!Animate.cssの素晴らしいアニメーションを利用するために、これ以上の準備は必要ありません。シンプルなアニメーション最初は、ページがロードされた時に要素がアニメーションする、スタティックなアニメーションを実装してみましょう。このタイプのアニメーションは通常、ページの最上部でよく見かけるもので、表示された際に一度だけアニメーションします。具体的には、ページの最上部にフルスクリーンのヒーロー要素を配置し、ロードされた時にそれらの要素をアニメーションで動かします。HTMLはシンプルです。h2の2つの見出しのclassに「animated」と「bounceInDown」を加えます。「animated」は、Animate.cssを使うために必ず必要です。「bounceInDown」はアニメーションの種類で、さまざまな動きが用意されています。-GitHubに一覧があります。Animate.css</h2></header>これでもいいですが、もう少し機能を加えてみましょう。下にスクロールしてコンテンツを見てもらうために、下方向にバウンドするアローを加えます。このアローにも2つのclassを加えます。bounce"></span></header>ここまでの実装でアニメーションは、一度だけ動きます。バウンドするアローは繰り返しアニメーションさせたいですよね。Animate.cssでは回数や時間などを設定できるオプションが用意されています。animation-durationanimation-delayanimation-iteration-countアローのアニメーションを間隔と回数を変更するために、1と3のプロパティを使用します。念のため、HTMLを確認しておきましょう。bounce"></span></header>アローだけに、アニメーションのオプションを指定します。infinite;}この指定で、アローは2.5秒間隔で、永遠にアニメーションします。実際のアニメーションは、下記のデモでご覧ください。CodePen.スタティックなアニメーションを実装するのは、非常に簡単です。次のセクションでは、jQueryを使用してAnimate.cssを動的にトリガーすることによって、いくつかの複雑さを加えてみます。スクロールでアニメーションわたし達が目にする印象的なアニメーションの一つ目は、スクロールアニメーションです。jQueryを使用すると、ほんの数行で要素がビューポートにあるか調べることができます。あとは、Animate.cssのclassを加えるだけです。ここでは、アイコンとテキストを配置した3つのブロックを使用します。基本となるHTMLです。a.</p></div></div>jQueryで要素がスクロールして、ビューポートに表示されたかどうか調べます。下記のコードはコピペで簡単に利用できます。コードでは、ユーザーがスクロールした距離、ウィンドウの高さ、およびこれを計算するための要素の上からのオフセットを使用しています。scrollイベントとこの関数を使用して、「fadeInLeft」を要素のclassに自動的に加えます。{$(this).addClass('fadeInLeft');}});});});実際のアニメーションは、下記のデモでご覧ください。さきほどのヒーロー要素から下にスクロールすると、アイコンとテキストを配置したブロックがあり、これら3つのブロックはスクロールに伴い、それぞれ表示されます。CodePen.次のセクションでは、クリックをトリガーしたアニメーションを実装してみます。クリックでアニメーションクリックをトリガーにしたアニメーションは、お問い合わせフォームに実装してみます。フォームが送信される時に、jQueryで入力欄が空欄かどうかチェックします。空欄だった場合は、そこにレッドのボーダーを加え、ユーザーにエラーであることを知らせます。基本的なHTMLです。id="message"></textarea></form><button>Send</button></div>よく見かけるフォームの実装ですね、簡単です。あとは今までと同じように、classを加えるだけです。スクロールでは、スクロールしてからアニメーションを一度だけ実行する必要がありました。同じにすると、期待通りにアニメーションしません。下記はその問題点です。2回目以降はアニメーションしない送信ボタンを最初にクリックした時にはアニメーションが適用されますが、その後は適用されません。この原因は、1回目にclassが加えられた時にはアニメーション化されますが、2回目以降はclassが加えられていないからです。最初にアニメーションした後にそのclassを取り除く必要があります。2回目以降に再び加えます。この問題を解決するためにJavaScriptを使用して、アニメーションの終了を確認してからclassを再び加えることができます。something});「.one()」は「.on()」と基本的には同じです。Documentationこの便利なjQueryのメソッドを使用して、ロジックを見てみましょう。送信ボタンがクリックされると、空のinput要素を確認します。空であれば、class(アニメーションやエラー表示)を加えます。最後にアニメーションが終了した時に、加えたclassを取り除きます。click関数を作成します。イベントリスナーを使用して、アニメーションを繰り返し実行することもできます。これらすべてをまとめると、JavaScriptは下記のようになります。{$('#message').removeClass('form-error');}});「.form-error」はエラー表示用で、入力欄にレッドのボーダーを適用するだけです。空欄があった場合、どのようにアニメーションするかは下記のデモでご覧ください。面白いアニメーションここまでスタティックなアニメーション、スクロールでアニメーション、クリックでアニメーションと学んできました。最後はボーナスのセクションとして、Animate.cssが持つ面白いアニメーションを楽しんでみましょう。実際のサイトで使いどころは限定されますが、コードを触るのが楽しいと思います。Animation.cssのサイトを見ると、「Special」というカテゴリがあるのに気がつくでしょう。この中には面白いアニメーションが用意されており、その中から「hinge」を使用してみます。「hinge」は蝶番のアニメーションです。ここでは要素をクリックしたら、その要素を蝶番のように動かしてみます。実装はこれまでと同じように、クリックした際にclassを加え、終了後にclassを取り除きます。hinge');});});実際の動作はデモページの最後、4つ目のセクションをご覧ください。CodePen.Animate.cssを使う時のポイントまとめここまで学んだ、Animate.cssを使う時のポイントを要約します。最初に、Animate.cssの準備と基本的な使い方を学びました。続いて、スタティック・スクロール・クリックの3つの異なるアニメーションの使い方を学びました。最後に、Animate.cssのライブラリにある面白いアニメーション(有用ではないかもしれないけど)の使い方を学びました。このチュートリアルをあなたが楽しんで、Animate.cssをWebデザインに活用することを私は願っています。