Animate.cssでCSS3アニメーションを簡単に実装する

2017年10月17日 CSS naoyu

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

animate.cssをダウンロードする

Animate.cssのサイトへ行き、CSSファイルをダウンロードします。

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

Animate.css公式サイト

animate.cssの使い方

CSSファイルを読み込みます。

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

クラスは.animatedと、アニメーションのパターン.bounceを指定します。
.infiniteを追加すると、アニメーションが無限ループします。

クラスをを適用したサンプルは以下のとおり。

 

bounce

bounce

bounce

 

上からこのようなHTMLコードになっています。

※クラス“demo”はボタン風デザインのものです。

block要素にのみアニメーションが適用されるんですね。

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

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

各アニメーションに対するクラス名をまとめたサンプルページを作りました。

わちゃわちゃして見辛いのは勘弁してくださいw

サンプルを見る

イベントを使用してアニメーションを実行する

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

clickイベントで“animated“と“swing”クラスを付与してます。

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

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

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

このアニメーションイベントのサンプルを見る

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

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

jQuery.inviewを活用する

jQuery.inviewとは

スクロールインする時にイベントを簡単に発火させる事ができるjQueryプラグインです。

ダウンロードは下記Githubから可能です。

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

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

jQuery.inviewの使い方

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

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

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

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

このアニメーションイベントのサンプルを見る

jquery.animateCssPlus.jsでAnimate.cssをもっと便利にする

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

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

jquery.animateCssPlus.jsの使い方

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

オプション指定無しの$('selector').animateCssPlus()と指定すると、マウスホバー時にアニメーションが実行します。

各オプションの説明

click:trueは、クリックするとアニメーション実行。

scroll:trueは、スクロールインでアニメーション実行。

但し、スクロールイベントは一度のみなので、再度アニメーションを見たい場合はブラウザを更新する必要があります。

このアニメーションイベントのサンプルを見る

まとめ

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

CSS3アニメーションを簡単に実装することはできますが、使い所はデザイナーのセンスに掛かっているのかな、とも思います。

UX的に「可愛さ」や「楽しさ」を感じられるような、遊び心のあるサイトを作る際、ぜひ取り入れてみたいですね。

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

僕もうまく使えるようがんばりますよー。