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

実装準備

Animate.cssをダウンロードして通常のCSSと同じように読み込みましょう。
それだけ。

<!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ページの印象を変える

１分実装

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

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

アニメーションの設定

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

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にあるサンプル通りですが。

<!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を使ってサイトにアニメーションをつける

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

実装準備

１分実装

アニメーションの設定

イベントに連動して実行

wow.jsと連動