Animate.cssでクリックやスクロール時にアニメーションするテクニック

公開日: 2017年10月17日最終更新日: 2018年5月24日

CSS3「animation」プロパティは、HTML要素に「動き」をつけてWEBサイトをデザインするテクニックです。

マウスをかざせば「ふわっと」拡大する画像や、ハンバーガーボタンをタップするとコンテンツメニューが「ぬるっと」横からスライドしてくるなど、使い方はいろいろ。

様々なアクションに対しアニメーションを追加することで、ユーザー体験がより楽しく・気持ちよくなることでしょう。
ランディングページやフォームの送信ボタンなど、コンバージョンに繋がる要素などにもオススメです。

1 CSSのAnimationって？
2 CSSアニメーションの対応ブラウザ
3 Animate.cssでかんたんにCSSアニメーション
4 Animate.cssの基本的な使い方
5 Animate.cssを補助するjQueryプラグイン
6 jQueryイベントでアニメーションを実行
7 画面内にスクロールインしたらアニメーション実行
8 まとめ

CSSのAnimationって？

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

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

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

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

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

このように省略形animation:で指定することもできます。

div { animation: anime1 5s ease -2s infinite alternate; }

1	div { animation: anime1 5s ease -2s infinite alternate; }

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

p {
animation-duration: 3s;
animation-name: slidein; /* ←「slidein」 というアニメーションを紐付ける */
background-color: #f00;
}
/* 以下「slidein」というアニメーションを定義 */
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
background-color: #ff0;
}
to {
margin-left: 0%;
width: 100%;
background-color: #f00;
}
}

p {

animation-duration: 3s;

animation-name: slidein; /* ←「slidein」というアニメーションを紐付ける */

background-color: #f00;

}

/* 以下「slidein」というアニメーションを定義 */

@keyframes slidein {

from {

margin-left: 100%;

width: 300%;

background-color: #ff0;

}

to {

margin-left: 0%;

width: 100%;

background-color: #f00;

}

こんな風に動きます。

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

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

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

animationプロパティについて詳しくはこちらのサイトもどうぞ！
http://www.htmq.com/css3/animation.shtml

こうやってみると、CSSアニメーションって設定が多すぎて分かりにくいですよね。

本記事では、簡単なクラスの指定だけで簡単にアニメーションを実装する方法を紹介します。
後半では、jQueryを使ってクリックやスクロールに反応するアニメーションを設定しますので、よろしければ最後までお付き合いくださいね！

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

<link rel="stylesheet" href="animate.css">
<!-- CDNで読み込む場合は以下 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

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

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

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

<p class="animated bounce infinite">bounce</p>

1	<p class="animated bounce infinite">bounce</p>

各クラス説明です。

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

Animate.cssの注意点

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

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

bounce

bounce

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

<div class="demo animated infinite bounce">bounce</div>
<p class="animated infinite bounce">bounce</p>
<i class="animated infinite bounce">bounce</i>

<div class="demo animated infinite bounce">bounce</div>

<p class="animated infinite bounce">bounce</p>

<i class="animated infinite bounce">bounce</i>

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

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

Animate.cssのサンプル

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

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要素には、data-class属性にAnimate.cssのアニメーションクラスを指定します。

<div class="btn" data-class="bounce">bounce</div>

1	<div class="btn" data-class="bounce">bounce</div>

jQueryで実行します。

$(function() {
$('.btn').animateCssPlus();
});

$(function() {

$('.btn').animateCssPlus();

});

これで、マウスのhover時にアニメーションが実行されます。

jquery.animateCssPlus.jsのオプション

<span id="click">hinge</span>
<span id="scroll">rollIn</span>
<script>
$(function() {
$('#click').animateCssPlus({
click:true,
class:'hinge'
});
$('#scroll').animateCssPlus({
scroll:true,
class:'rollIn'
});
});
</script>

<span id="click">hinge</span>

<span id="scroll">rollIn</span>

$(function() {

$('#click').animateCssPlus({

click:true,

class:'hinge'

});

$('#scroll').animateCssPlus({

scroll:true,

class:'rollIn'

});

</script>

click : true でクリック時にアニメーション。

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

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

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

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

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

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

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

$(function(){
$("#test").on({
"click":function(){
$(this).addClass("animated swing");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated swing");
}
});
});

$(function(){

$("#test").on({

"click":function(){

$(this).addClass("animated swing");

"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){

$(this).removeClass("animated swing");

}

});

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

「アニメーション終了後」に発火する特殊イベント

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

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

アニメーションが終わったら、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の使い方

<p id="inview">アニメーション</p>
<script src="jquery.inview.js"></script>
<script>
$(function() {
$('#inview').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
//ブラウザの表示域に表示されたときに実行する処理
$(this).addClass('animated rollIn');
} else {
//要素が見えなくなったときに実行する処理
$(this).removeClass('animated rollIn');
}
});
});
</script>