Animate.cssでクリックやスクロール時にアニメーションするJS応用テクニック!【デモあり】

2017年10月17日 2018年9月15日

CSS3の「animation」プロパティは、HTML要素に「動き」をつけてWEBサイトをデザインするテクニックのひとつです。
より楽しく・気持ちよくコンテンツを楽しめるよう、多くのWEBサイトで採用されています。

マウスを合わせると「ふわっと」拡大するリンク画像や、ボタンをタップするとコンテンツメニューが横からヌルっとスライドしてきたり、以前はJavascriptがなければ表現できなかったデザインが、CSSのみで実装できるようになりました。

このように、ユーザーのアクションに対して小さな動きをつけることを、“マイクロインタラクション”と呼びます。
動きがある部分には目線が行く心理的効果も期待できるので、「ユーザーにぜひ見てほしい部分」にアニメーションを利用するのも有効です。

絶滅しそうなウナギブロガー
プルプルっと動くボタンとかにしたいなぁ…やり方は難しいのかな?

たとえばこんなやつ?

ぷるっと動くボタン

Animate.cssを使えば、とても簡単に実装できますよ!
classを2~3コ指定するだけでアニメーションが実装できる「Animate.css」の使い方を紹介します。

後半では、jQueryを使ってクリックスクロールに反応するアニメーション実装方法も説明しますね。

CSSのAnimationってどういうもの?

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

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

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

CSSアニメーションは、6つのプロパティを組み合わせてアニメーションを設定します。

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

省略形「animation:」で指定することもできます。

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

こんな風に動きます。

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

fromの部分を0%、toの部分を100%と書いても同じ意味になります。
パーセント表記なら、50%や68%など複数のkeyframeを追加できます。
より複雑にアニメーションさせたい場合は、細かく指定します。

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

animationプロパティについて更に詳しくはこちらも参考になります。
http://www.htmq.com/css3/animation.shtml

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

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

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

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

 

さてさて、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>内で読み込めば準備完了です。

最新バージョンのCDNは下記サイトで確認することができますよ。
https://cdnjs.com/libraries/animate.css

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

HTML要素にAnimate.css用のClassを指定することで、アニメーションを定義することができます。

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

各Classの説明はこちら。

animated:Animate.cssの定義に「必須」のClassです。

bounce:アニメーションのパターンを指定します。bounceの場合「地面で跳ねる様な動き」をします。

infinite:アニメーションが無限ループします。1回だけ動かす場合はinfiniteは要りません。

スピードを調節するclass

delay-2s、slow、fastなど新しいclassが追加されました。
delay-nsは、アニメーション開始をn秒だけ遅らせるます(ディレイ)。

slow、fastは、アニメーションのスピードを早くしたり遅くしたり微調整ができます。
デフォルトでは、1秒間でアニメーションしています。

ディレイ

Class Name Delay Time
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s

スピード

Class Name Speed Time
slow 2s
slower 3s
fast 800ms
faster 500ms
絶滅しそうなウナギブロガー
アニメーションしたい要素にClassを指定するだけで良いんだね!

Animate.cssの注意点

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

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

bounce

bounce

bounce

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

inline要素をアニメーションすることは出来ないようです。
spanなどinline要素をアニメーションさせるには、CSSでdisplay:blockかinline-blockにする必要があります。

Animate.cssのサンプル

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

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

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

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

jQueryを使ったシンプルなコードで実現可能です。

スクロールでHTML要素がブラウザ内に入ったときにアニメーションを実行します。
指定の.animatedが複数ある場合を考慮し、each function で記述します。

 

指定の要素をクリックした時にアニメーションを実行します。

6行目の"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"は、「アニメーションの終了後」という特殊なイベントになります。
アニメーションの終了後、Animate.cssのクラスを削除しています。

マウスを乗せた時にアニメーションしたい場合は、”click”を”mouseover”に変更してください。

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

こちらの記事を参考にさせて頂きました。
【CSS3】Animate.cssを使って簡単にアニメーションを実装する。

Animate.cssを補助するjquery.animateCssPlus.js

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

下記サイトよりjquery.animateCssPlus.js本体をダウンロードします。
CSS3でのアニメーションライブラリanimate.cssの使い方 – ITS

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

jquery.animateCssPlus.jsの使い方

アニメーションさせたいHTML要素のdata-class属性に、Animate.cssのアニメーションClassを指定します。

jQueryで実行します。

これでマウスホバー時にアニメーションが実行されるようになりました。

jquery.animateCssPlus.jsのオプション

オプションを使えば、アニメーションの種類はJSで指定することもできます。

HTML

JS

各オプションの説明はこちら。

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

classには、Animate.cssのアニメーションクラスを指定します。

但し、スクロールインでのアニメーションの実行は「1回」のみ。

往復して何回もアニメーションしたい場合は、後述の「jQuery.inview」を使うと良いですよ。

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

画面内に入ったら処理をするjQuery.inview.js

「jQuery.inview」を使うと、指定したHTML要素がブラウザ内に表示されるタイミングでアニメーションさせる事ができます。

jQuery.inviewとは

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

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

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

jQuery.inviewの使い方

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

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

追記:2018.9.6
Androidに限り、処理が遅い場合があります。端末のスペックによるものなのか検証不足により判断はできませんが、複数端末で処理が遅い現象を確認しています。
とくに高速でスクロールさせた時は、高確率で実行されません。
iOSやPCではまったく問題なく動作しています。

こちらのサイトを参考にさせていただきました。
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン

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

まとめ

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

CSSアニメーションでユニークなマイクロインタラクションを実装しているWEBサイトも増えてきましたね。
「動き」もデザインの一部です。リッチコンテンツをもっともっと勉強していきましょう!

この本も参考になりそうです!

合わせて読んで欲しい記事

スクロール時のアニメーションを簡単実装「AOS」の使い方【jQuery不要】

ウェルスナビで損失?

コメント

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください