Animate.cssで手軽にアニメーションを実装


1分シリーズです。
Webページにちょっとしたアニメーションを追加することで見栄えを良くしましょう。
[Animate.css](https://daneden.github.io/animate.css/)を利用すると手軽にアニメーションを実装できます。

# 実装準備
[Animate.css](https://daneden.github.io/animate.css/)をダウンロードして通常のCSSと同じように読み込みましょう。
それだけ。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="author" content="">
	<meta name="copyright" content="">
	<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
	<link rel="index" href="/">
	<!-- CSS -->
	<style type="text/css">
        body{
            font-size:2em;
        }
        .font1{
            font-family: 'Alegreya Sans', sans-serif;
        }
    </style>
	<!-- webfonts -->
	
	<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
    
    <!-- Animate.cssを読み込む -->
	<link href='css/animate.css' rel='stylesheet' type='text/css'>
</head>
```

Webフォントってなんやねんという方は前回の記事も是非どうぞ。
[Webフォントで手軽にWebページの印象を変える](http://qiita.com/stkdev/items/f5c50c4f12bb474e302e)

# １分実装

アニメーションさせたい要素に対してclassを設定します。
classに"アニメーション名"と"animated"を追加します。
おわり！

```html
<body>
	<p class="font1 rubberBand animated">
        1分で実現できる有用な技術 Advent Calendar 2015
    </p>
</body>
```

# アニメーションの設定

上記の１分実装ですと、ページが読み込まれてすぐにアニメーションが１回のみ実行されたと思います。
開始を遅らせたり、繰り返し回数を指定したりできます。

```css:css設定部分
<style type="text/css">
        body{
            font-size:2em;
        }
        .font1{
            font-family: 'Alegreya Sans', sans-serif;
            animation-delay:2s; //2秒遅延して実行
            animation-iteration-count: 3; //３回繰り返す
//            infiniteを指定すると連続
//            animation-iteration-count: infinite;
        }
    </style>
```

# イベントに連動して実行

ここからはもう１分超えると思いますが…。
JavaScriptと組み合わせるとクリックなどのイベントをトリガーにアニメーションを実行できます。

head内にJavaScriptを追加しています。（jQuery使用）
ほぼAnimate.cssにあるサンプル通りですが。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="author" content="">
	<meta name="copyright" content="">
	<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
	<link rel="index" href="/">
	<!-- CSS -->
	<style type="text/css">
        body{
            font-size:2em;
        }
        .font1{
            font-family: 'Alegreya Sans', sans-serif;
            animation-delay:1s;
            animation-iteration-count: 2;
        }
    </style>
	<!-- webfonts -->
	
	<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
	<link href='css/animate.css' rel='stylesheet' type='text/css'>
	
    <!-- script -->
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#animation').click(function(e){
                e.preventDefault();
                $('#animation').removeClass().addClass('font1 rubberBand' + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    $(this).removeClass();
                });
            });
        });
    </script>
    
</head>
<body>
	<p class="font1 rubberBand animated">
        1分で実現できる有用な技術 Advent Calendar 2015
    </p>
	<p id="animation" class="font1">
        1分で実現できる有用な技術 Advent Calendar 2015
    </p>    
</body>
</html>

```

シンプルなアニメーションならclass指定だけででき、イベントとの連動もjsで手軽にできます。

# wow.jsと連動

応用編としてwow.jsとの連携を紹介します。
wow.jsというjsライブラリとAnimate.cssを使うとスクロールをトリガーにアニメーションを開始できるようになります。
最近良く見るスクロールしていくとポコポコとコンテンツが出てくるようなページを手軽に作れます。
こちらの記事が非常に参考になります。
[Animate.cssとwow.jsを使ってサイトにアニメーションをつける](http://qiita.com/tiwu_official/items/989834406c25deccee8b)