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

画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。

トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。

サイトのキャプチャ

All Animation
All Animation -GitHub

All Animationのデモ

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

デモのアニメーション

デモページ

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

サイトのキャプチャ

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

All Animationの使い方

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

Step 1: 外部ファイル

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

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

Step 2: HTML

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

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

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

Step 3: JavaScript

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

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

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

top of page

©2017 coliss