Animate.cssでクリック、スクロール等マウスに反応してアニメーションさせる方法

公開日: 2017年10月17日 最終更新日: 2018年4月19日

ボタンやアイコンに「動き」加え、その部分を注目させる事ができるアニメーションのテクニック。

ランディングページやフォームの送信ボタンなど、コンバージョンに繋がる要素などにオススメです。

 

本記事では、CSSだけで簡単にアニメーションを実装する方法を紹介します。

後半では、ほんの少しjQueryを使いクリックスクロールに反応するアニメーションを設定しますので、よろしければ最後までお付き合いくださいね!

CSSのAnimationって?

CSS3 アニメーション は、ある CSS のスタイル設定を別の設定へ遷移させることを可能にします。アニメーションは、2 種類の要素で構成されています。それは、アニメーションについて記述するスタイルと、アニメーションの始めと終わりの CSS スタイルを示すキーフレームです。同様に、アニメーション途中の通過点となるスタイルを示すこともできます。

引用元:CSS アニメーション – MDN

CSSでは、アニメーションを定義するプロパティが用意されています。
Javascriptが無くても、簡単な動きなら付けられちゃうんですね~!

頑張ればCSSだけで複雑な動きも再現できそうですが、ここではシンプルな例だけを挙げていきます。

 

次のコードはCSSアニメーションの簡単な一例です。

animation-durationが上記の「アニメーションについて記述するスタイル」で、「アニメーションの始めと終わりのキーフレーム」が@keyframesの部分です。

こんな風に動きます。

@keyframesのfromからtoへ向かって、なめらかにスタイルが変化していますね。

fromの部分を0%、toの部分を100%と書いてもOK
間に50%75%など、任意でkeyframeは追加可能です。

これが基本的なCSSアニメーションの定義の仕方になります。

CSSアニメーションの対応ブラウザ

CSSアニメーションは、各モダンブラウザでは対応済みですがIEでは10以降で対応します。

IE9以下はさっさと切り捨ててしまいましょう!

https://caniuse.com/#search=animation

Animate.cssでかんたんにCSSアニメーション

さてさて、CSSアニメーションの基本知識はこれくらいにして、ここからはCSSのアニメーションを手軽に実装できるCSSフレームワークAnimate.css」の使い方を紹介していきます。

Animate.cssは、HTML要素に2~3個のクラスを指定するだけで、76パターンもの動きを表現できるんです。

早速、Animate.cssでCSSアニメーションを実装していきましょう!

Animate.cssの基本的な使い方

Animate.cssを読み込む

まずはAnimate.css公式サイトからCSSファイルをダウンロードします。

https://daneden.github.io/animate.css

Download Animate.cssをクリックするとCSSファイルをダウンロードできます。

 

ちなみに、セレクトメニューで選んで「Animate it」ボタンを押すと、そのアニメーションの動きを確認することができます

 

ダウンロードしたCSSファイルを<head>内で読み込めば準備完了です。

Animate.css設定用のclassを付ける

Animate.css用のClassを指定することで、その要素にアニメーションを付けられます。

アニメーションさせるには以下の様にClassを指定してみましょう。

各クラス説明です。

  • .animated:Animate.cssで指定必須のClass
  • .bounce:アニメーションのパターンを指定、bounceの場合「地面で跳ねる様な動き」をします
  • .infinite:アニメーションが無限ループ、1回だけ動かす場合、infiniteは要りません

Animate.cssの注意点

アニメーションできるのは「block要素」か「inline-block要素」。
「inline要素」にはアニメーションが付けられません。

それぞれの要素にAnimate.cssのclassを付けてみます。

bounce

bounce

bounce

上2つはぴょんぴょん飛び跳ねていますよね?
これらは下記のようなHTMLになっています。

※class=“demo”は、ボタン風デザイン用スタイルです

もしinline要素をアニメーションさせたい場合は、inline-blockに変更する必要があります。

Animate.cssのサンプル

各アニメーションに対するクラス名をまとめたサンプルページを作りました。
わちゃわちゃして見辛いのは勘弁してくださいw

 

Animate.cssのサンプルを見てみる

 

追記:2018/4/19
アニメーション「jackInTheBox」は、バージョン3.6.0で追加されたパターンです。
CDNはバージョン3.5.2までしか公開されていない為、jackInTheBoxを使いたい場合は最新版をダウンロードしてお使いください。

Animate.cssを補助するjQueryプラグイン

「jquery.animateCssPlus.js」いうjQueryプラグインは、Animate.cssと一緒に使うことでクリックやホバー時にアニメーションさせる事が出来るようになります。

早速、使ってみましょう!

jquery.animateCssPlus.jsの使い方

下記サイトよりjquery.animateCssPlus.js本体をダウンロードします。

CSS3でのアニメーションライブラリanimate.cssの使い方 – ITS

 

ページの下の方に「jquery.animateCssPlus.jsダウンロード」というリンクがあるので、クリックしてダウンロードします。

 

ダウンロードしたら読み込みましょう。

アニメーションさせたいHTML要素は、一旦下記の様に書きます。

HTML要素のdata-class属性にAnimate.cssのアニメーションクラスを指定します。

 

 

オプション無しの場合は、マウスhover時にアニメーションが実行されます。

 

jquery.animateCssPlus.jsのオプションは以下の通り。

  • click : true でクリック時にアニメーション実行
  • scroll : true でブラウザ領域内にスクロールインするとアニメーション実行

 

但し、スクロールインでのアニメーションは1回だけで、再度アニメーションしません。
何回もスクロールインでアニメーションしたい場合は後述の「jQuery.inview」を使うと良いですよ。

 

jquery.animateCssPlus.jsを使ったサンプルを見る

 

jQueryイベントでアニメーションを実行

クリックやホバーなどのマウス動作や、画面内にスクロールインした時にアニメーションさせます。
jQueryを使ったシンプルなコードで実現可能です。

4行目で“animated“と“swing”クラスを追加しています。

「アニメーション終了後」に実行するイベント

6行目の"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"というは、

「アニメーションの終了後」という特殊イベントになります。

アニメーションが1回実行された後、animate.css用のクラスを削除しています。

 

jQueryのイベントを使ったサンプルを見る

 

こちらの記事を参考にさせて頂きました。

【CSS3】Animate.cssを使って簡単にアニメーションを実装する。

画面内にスクロールインしたらアニメーション実行

「jQuery.inview」というjQueryプラグインを使って、ブラウザ内に要素が入ったタイミングでアニメーションさせる事ができます。

jQuery.inviewとは

スクロールイン時、手軽にイベントを発火させるjQueryプラグインです。

https://github.com/protonet/jquery.inview

右上のClone or downloadのDownload ZIPをクリックすると、まとめてファイルをダウンロード可能です。

jQuery.inviewの使い方

引数isInViewは、指定した要素がブラウザ内にインするとtrue、アウトならfalseを返します。

if文の条件にisInViewを指定し、クラスの追加(addClass)と削除(removeClass)を行っています。

 

こちらのサイトを参考にさせていただきました。

【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン

 

jQuery.inviewを使ったサンプルを見る

 

まとめ

Animate.cssを使って、CSSアニメーションを実装する様々な方法を紹介しました。

ひと通り試してみて、コンバージョンボタンなどから手始めにCSSアニメーションを取り入れてみてはいかがでしょうか?

しかしまぁ、アニメーションの使い所って案外と難しいんですよね~。