[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation

Post on:2014年3月4日

All Animationのデモ

デモでは数多くのCSS3アニメーションが楽しめます。
ほんの少しですが、gifアニメーションにしてみました。
ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。

All Animationで実装できるアニメーションはバウンド系、フェード系、パース系、回転系、爆発系など、下記のようにさまざまなものが揃っています。

実装できるアニメーションの一覧

アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。
もちろん、ホバーなど他のアクションを利用することもできます。

当スタイルシートとjquery.jsを外部ファイルとして記述します。

<link rel="stylesheet" type="text/css" href="yourpath//all-animation.css" />
<script type="text/javascript" src="yourpath/jquery.js"></script>

アニメーションさせる要素に「#animation」、あとはトリガーとなるボタンを配置します。

<div id="animation"></div>

<button class="anny-class">Trigger class, go!</button>

トリガーのclassと動作（click）を指定し、アニメーションさせる要素とそのエフェクトを設定します。

$(".anny-class").click(function(){
 $("#animation").addClass("journal");
});

各アニメーションはその要素にclassを加えるだけでも、適用できます。