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

More than 3 years have passed since last update.

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


1分実装

アニメーションさせたい要素に対してclassを設定します。

classに"アニメーション名"と"animated"を追加します。

おわり!

<body>

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


アニメーションの設定

上記の1分実装ですと、ページが読み込まれてすぐにアニメーションが1回のみ実行されたと思います。

開始を遅らせたり、繰り返し回数を指定したりできます。


css設定部分

<style type="text/css">

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


イベントに連動して実行

ここからはもう1分超えると思いますが…。

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