軽量でめちゃくちゃ使いやすいアニメーションCSS Animate.css

cap

Animate.cssは、軽量でめちゃくちゃ使いやすいアニメーションCSSです。

シンプルで、動きが綺麗です。実装も簡単です。

オリジナルデモを作ってみました。

実装方法

CSSファイルを読み込みます。必要に応じてjqueryも読み込んでおきましょう。

<head>
 <link rel="stylesheet" href="animate.min.css">
 <script src="js/jquery.min.js"></script>
</head>

対象の要素(#yourElementの部分)と、アニメーション(bounceOutLeftの部分)を指定します。

$('#yourElement').addClass('animated bounceOutLeft');

アニメーションが終了したタイミングで、何かをすることも可能です。

$('#yourElement').addClass('animated bounceOutLeft').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});

アニメーションの細かな速度を指定することもできます。

#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}

公式サイト・解説

Animate.css
公式サイト ダウンロードはこちら。

daneden/animate.css · GitHub
使い方の解説。