CSS3アニメーションを簡単に実装できるAnimate.cssの使い方

2017年10月17日 CSS NAndo

CSS3のアニメーションを手軽に実装できるCSSフレームワーク『Animate.css』。
2~3個のクラスを指定するだけで、76パターンもの動きを表現できます
ちょこっとアニメーションを加えるだけで、その部分を注目させる効果を持たせることができるため、ランディングページや資料請求フォームへのリンクなど、コンバージョンに繋がる要素におすすめです。

Animate.cssの使い方

まずはCSSファイルをダウンロードします。

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

GitHubへのリンクがあるので、そこから「animate.css」をダウンロードし、読み込みます。

そして、アニメーションさせたいHTML要素にクラスを指定します。

クラスは“animated”と、アニメーションのパターン“bounce”を指定します。
“infinite”を追加すると、繰り返しアニメーションさせることができます。

デモ

bounce

bounce

bounce

デモのソース

block要素にのみアニメーションが適用されます。
inline要素に適用する場合は、display:inline-blockを適用させるとアニメーションが適用されます。

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

各アニメーションに対するクラス名をまとめたサンプルページを作りました(わちゃわちゃして見辛いと思うが)。
良ろしければ参考までに。

サンプルページ

クリックやスクロールインで動的にアニメーションを実行する

クリックやホバーなどのマウスの動作や、スクロールインした際にアニメーションが実行されるよう動的にAnimate.cssを制御する方法です。
jQueryを使って比較的シンプルなコードで実現可能です。

clickイベントで“animated“と“swing”クラスを付与してます。
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"は、「アニメーション終了後」というイベント。
付与したクラスを削除します。

参考サイト

【CSS3】Animate.cssを使って簡単にアニメーションを実装する。
http://bashalog.c-brains.jp/14/07/17-095900.php

スクロールインするタイミングでイベント発火するプラグインjQuery.inview

スクロールして要素がブラウザ内に表示されるタイミングでイベントが発生します。
ランディングページなどでよく使われている(であろう)jQueryプラグインです。
ダウンロードは以下から。
jQuery.inveiw.js

使い方

引数isInViewは、指定した要素がブラウザ内にインするとtrue、アウトならfalseを返します。
if文でクラスの付与と削除を行っています。

参考にしたサイト

【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン
http://bashalog.c-brains.jp/13/07/25-095600.php

また、Animate.cssを動的制御する為のjQueryプラグインもあります。

jquery.animateCssPlus.jsでAnimate.cssをより便利に使う

CSS3でのアニメーションライブラリanimate.cssの使い方
https://its-office.jp/blog/css/2016/04/09/animate.html

上記ページの下の方に「jquery.animateCssPlus.jsダウンロード」とリンクがあるので、そこからデータをダウンロードします。

使い方

HTML要素のdata-class属性に、Animate.cssのアニメーションクラスを指定します。
$('selector').animateCssPlus()は、マウスホバーでアニメーションが実行します。
clickをtrueにするとクリックで実行し、scrollならスクロールインでアニメーションが実行します。
但し、スクロールイベントは一度のみなので、再度アニメーションを見たい場合は、F5でブラウザを更新する必要があります。

イベントサンプル

まとめ

いかがでしたでしょうか。

CSS3アニメーションを簡単に実装することはできますが、使い所はデザイナーのセンスに掛かっているのかな、とも感じます。
UX的に「可愛さ」や「楽しさ」を感じられるような、遊び心のあるサイトを作る際、ぜひ取り入れてみたいですね。

あんまりやり過ぎるとわちゃわちゃするだけですがね。