Animate.css をってみる

Animate.css を使ってみたのでメモ。

Animate.css は、JavaScript を使わず、CSS のみでアニメーション効果を付けることができます。

サンプル

Animate.css

CDN

ファイルをDL して使いますが、cdnjs というサイトでCDN もあります。

こちらに最新版のCDNがあります。

<a data-mce-href="https://cdnjs.com/libraries/animate.css" href="https://cdnjs.com/libraries/animate.css">animatecss - cdnjs.com - the missing cdn for javascript and css</a>cdnjs.com


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

使い方

アニメーションを付けたいタグに、animated <アニメーション名>のクラスを追加するだけで使えます。

また、アニメーション終了の判定は、以下で行えます。これは、animated.css に限らず、CSS3 のanimation(keyframes)の終了判定にも使えそうです。

.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
 // 終了した後の処理
  });

以下はボタンをクリックしたときにanimate.css のアニメーションを追加する例です。


$('.btn-anime').change(function(e) {
 $('.anime')
 .addClass('animated ' + 'bounce')
 
 // You can also detect when an animation ends:
 .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  $(this).removeClass('animated ' + 'bounce');
 });
});