Animate.cssでhover,click,scrollなどイベントでアニメーション処理する応用テクニック

CSS3アニメーションは、要素に「動き」をつけてWEBサイトをデザインするテクニックのひとつです。
楽しい・気持ちのいいコンテンツにしようと多くのWEBサイトで採用されています。

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

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

絶滅しそうなウナギブロガー

プルプルっと動くボタンとかにしたいなぁ…やり方は難しいのかな？

たとえばこんなボタンとか。

ぷるっと動くボタン

Animate.cssを使えばカンタンです！
classを2～3コ指定するだけでアニメーションが実装できる「Animate.css」の使い方を紹介します。

後半では、jQueryなどを使ってクリックやスクロールで動くアニメーション実装方法も説明していきますので、よかったら最後までお付き合いください。

1 そもそもCSSのAnimationとは？
2 CSS Animation対応ブラウザ
3 Animate.cssの使い方
4 jQueryでアニメーションを操作
5 Animate.cssを補助するjquery.animateCssPlus.js
- 5.1 jquery.animateCssPlus.jsの使い方
- 5.2 jquery.animateCssPlus.jsのオプション
6 jQuery.inview.js
- 6.1 jQuery.inviewの使い方

そもそもCSSのAnimationとは？

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

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

CSSでは、アニメーションを定義するプロパティが用意されています。
6つのプロパティを組み合わせてアニメーションを設定します。

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%と書いても同じ意味になります。
パーセント表記なら、50%や68％など複数のkeyframeを追加できます。
より複雑にアニメーションさせたい場合は、細かく指定します。

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

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

CSS Animation対応ブラウザ

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公式サイトからCSSファイルをダウンロードします。

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

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

この画面にある「Animate it」ボタンを押すと、選択したアニメーションの動きを確認することができます。
セレクトメニューを変えながら、いろいろな動きを見てみてください。

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

<link rel="stylesheet" href="animate.css">
or
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">

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

アニメーションさせたい要素にclassを指定

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

次のコードは一例です。

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

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

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

スピードやタイミングを調節する新class追加

.delay-2s、.slow、.fastなどの新しいclassが追加されました。
delay-nsは、アニメーション開始タイミングを「n秒」だけ遅らせます（ディレイ）。

.slow、.fastは、アニメーションのスピードを変えることができます。
デフォルトのスピードは「1s（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を指定する実験です。

<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>

実装結果。

bounce

bounce

divやp要素はぴょんぴょん飛び跳ねていますが、iではアニメーションされません。
その他spanなどのinline要素をアニメーションさせるにはdisplay:blockかinline-blockを定義する必要があります。

Animate.cssのサンプル

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

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

CSSアニメーションの勉強にはこちらの書籍が参考になります。

魅せるスマートフォンサイトを実現！CSS3アニメーション・ブック for iPhone & Android

posted with ヨメレバ

外間かおりラトルズ 2011-04-22

Amazon

Kindle

楽天ブックス

jQueryでアニメーションを操作

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

$(window).on('scroll load',function () {
$('.animated').each(function(){
var $scrollBottom = $(window).scrollTop() + $(window).height();
var $torigger = $(this).offset().top;
if( $scrollBottom > $torigger) $(this).addClass('swing');
});
});

$(window).on('scroll load',function () {

$('.animated').each(function(){

var $scrollBottom = $(window).scrollTop() + $(window).height();

var $torigger = $(this).offset().top;

if( $scrollBottom > $torigger) $(this).addClass('swing');

});

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

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

$(function(){

$("#element").on({

"click":function(){

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

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

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

}

});

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を指定します。

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

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

jQueryで実行します。

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

$(function() {

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

});

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

jquery.animateCssPlus.jsのオプション

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

HTML

<span id="click">クリックするとブラーンてなって落ちる</span>
<span id="scroll">スクロールして画面に入ったら転がってくる</span>

1 2	<span id="click">クリックするとブラーンてなって落ちる</span> <span id="scroll">スクロールして画面に入ったら転がってくる</span>

$(function() {
$('#click').animateCssPlus({
click:true,
class:'hinge'
});
$('#scroll').animateCssPlus({
scroll:true,
class:'rollIn'
});
});

$(function() {

$('#click').animateCssPlus({

click:true,

class:'hinge'

});

$('#scroll').animateCssPlus({

scroll:true,

class:'rollIn'

});

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

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

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

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

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

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

jQuery.inview.js

jQuery.inviewは、スクロール・イン時にイベントを発火させることがカンタンにできるjQueryプラグインです。
jQuery.inview」を使うと、指定したHTML要素がブラウザ内に表示されるタイミングでアニメーションさせる事ができます。

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) {
if (isInView) {
//ブラウザの表示域に表示されたときに実行する処理
$(this).addClass('animated rollIn');
} else {
//要素が見えなくなったときに実行する処理
$(this).removeClass('animated rollIn');
}
});
});
</script>