【CSS3】Animate.cssを使って簡単にアニメーションを実装する。
fukasawaです。こんにちは。
クナイプのグーテナハトが安眠に良いと聞いたので試してみたのですが、風呂場中にタイカレーのようなスパイシーな香りが広がりました。安眠…？
Animate.cssは要素にclassをつけるだけで、簡単にいろいろな種類のCSS3アニメーションを実装してくれる便利なスタイルシートです。多くのブログで既に紹介されているものではあるのですが、バシャログではまだ誰も書いていないようなのでここぞとばかりに書いてみます。
公式サイト（デモ&ダウンロード）
GitHub(使い方など)
※CSS3アニメーションに対応しているブラウザで動作します。
簡単な使い方
animate.min.cssを読み込みます。
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
要素にanimatedクラスとbounceクラスをつけるとバウンドします。
<div id="test" class="animated bounce">bounce!!</div>
ここで指定したbounceクラスのかわりにflashクラスを指定すると点滅するアニメーションになり、wobbleクラスを指定するとグラグラするアニメーションになります。他にも沢山の種類のアニメーションが用意されています。公式サイトにデモがあるので参照してみてください。
アニメーションの長さ、待機時間、繰り返し回数を指定する
CSS3のプロパティで指定します。test-animationというクラスを定義し、アニメーションの動きを操作してみます。
<div id="test" class="animated bounce test-animation">bounce!!</div>
.test-animation{
…
/* ５秒かけてアニメーションする */
-webkit-animation-duration: 5s;
animation-duration: 5s;
/* 4秒待ってからアニメーションする */
-webkit-animation-duration: 4s;
animation-delay:4s;
/* 5回繰り返す */
-webkit-animation-iteration-count: 5;
animation-iteration-count: 5;
}
※上の例ではwebkitだけ書いていますが、必要に応じて他のベンダープレフィックスをつけたものを追加してください。
アニメーションをループさせる
infiniteクラスをつけておくとアニメーションがループします。
<div id="test" class="animated flash infinite">flash</div>
※CSS3のプロパティで「animation-iteration-count: infinite;」を指定したときと同じです。
動的にアニメーションを設定する
クリック等のイベントが発生したときにアニメーションを実行したい場合は、JavaScriptを使ってクラスを動的に付けてあげます。「クリックされる」→「クラスが付く」→「動く！」です。
jQueryを使用し、動的にクラスを追加してみます。
準備：jQueryを読み込んでおきます。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
例：クリックされたら要素をスウィングさせる
$(function(){
$("#test").on({
"click":function(){
$(this).addClass("animated swing");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated swing");
}
});
});
クリックが発生したときにaddClass()で要素にanimatedクラス、swingクラスを付加し、アニメーションを発生させています。
付加したクラスをそのままにしておくと、2回目以降のクリックでアニメーションが発生しなくなってしまうので、次クリックされたときのために外しておきます。アニメーションが終了したときに発生するイベントは"animationend"です。"animationend"が発生したらremoveClass()を使用し追加したクラスが外れるようにしておきます。
アニメーションイベントについては下記のリンクを参照してください。
