[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js

CSSアニメーションを組み合わせて利用する際、keyframesを使うよりももっと簡単に利用できるjQueryのプラグインを紹介します。

animo.js
animo.js -GitHub

• animo.jsのデモ
• animo.jsの使い方

animo.jsのデモ

デモはCSS3アニメーション対応ブラウザでご覧ください。

デモ

デモはシンプルなアニメーションから、いくつかのアニメーションを組み合わせたものがあります。

Make some magic

一つひとつの文字を異なる方向にフェードアウトし、異なる方向からフェードインさせます。

Rotate then flip out

それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。

animo.jsの使い方

Step 1: 外部ファイル

animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。

head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>
<link href="animate+animo.css" rel="stylesheet" type="text/css">

Step 2: JavaScript

アニメーションの実装はデモを例に紹介します。

demo: Tada and Bounce

上記デモはTadaの後に、Bounceのアニメーションを連結させたものです。
まずは、Tadaだけの実装から。

$('#demo1').animo( { animation: 'tada' } );

Tadaの後にBounceを連結させる時は、下記のように記述します。

$('#demo2').animo( { animation: ['tada', 'bounce'], duration: 2 } );

基本フォーマットは、下記の通り。

$(element).animo({
	// [string]/[array] 適用するアニメーション
	animation: "name", // or ["name1", "name2", "name3"]
	// アニメーション間の時間
	duration: 0.8,
	// [int] アニメーションの繰り返す数
	iterate: 1,
	// [string] アニメーションの各サイクルの持続時間のタイミング
	timing: "linear",
	// [boolean] アニメーションが完了した時に実行する動作があれば以下に
} [,function]);