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
使い方の解説。