CSS3動畫庫——animate.css

初見animate.css的時候，感覺很棒，基本上很多常用的CSS3動畫效果都幫我們寫好了，所以想要哪一種效果直接就可以拿過來用，甚是方便：

效果展示官網：http://daneden.github.io/animate.css/

github下載地址：https://github.com/daneden/animate.css

那么如何使用呢？

首先，我們在head標簽內引入我們下載好的animate.css文件：

<link rel="stylesheet" type="text/css" href="css/animate.css">

然后，在你需要設置動畫效果的元素標簽內先添加一個animated的類，這里拿h1做例子：

<h1 class="animated">hello world</h1>

如果你想讓你的動畫效果一直循環，則再添加一個infinite的類：

<h1 class="animated infinite">hello world</h1>

接下來就是根據你具體想實現哪一種動畫效果而添加相對應的類即可！我一般是去http://daneden.github.io/animate.css/這里找到某一分組，然后挑一些嘗試一下動畫效果是怎樣的，如果覺得合適就直接把類名添加到標簽里就OK了，比如，我這里選了一個淡出的效果：

<h1 class="animated infinite fadeOut">hello world</h1>

這樣h1標簽就會不停地呈現淡出的效果，但是不一定要添加infinite類，這個根據個人需要設置，默認是一次。

但是，一般我們是通過事件或設置定時器來觸發動畫效果的，比如點擊，懸浮，獲取焦點，移入移出等等這些事件來觸發我們動畫效果的呈現，這樣的話我們就可以使用JQuery來實現：

$(".test").click(function(){
          $(this).addClass('animated fadeOut');
});

當然，你可以檢測當此動畫結束時來執行某一函數，one()表示只執行一次：

$('.test').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

最后，我們想要的效果有了，但是如果你對動畫的默認配置參數不滿意，比如持續時間，延遲時間，執行次數等，那么我們自己可以自定義，只要能覆蓋掉animate.css的默認屬性值就行，需要添加各瀏覽器前綴：

.test{
          -webkit-animation-duration: 3s;
          -webkit-animation-delay: 4s;
          -webkit-animation-iteration-count: 5;

          -moz-animation-duration: 3s;
          -moz-animation-delay: 4s;
          -moz-animation-iteration-count: 5;

          -o-animation-duration: 3s;
          -o-animation-delay: 4s;
          -0-animation-iteration-count: 5;

          -ms-animation-duration: 3s;
          -ms-animation-delay: 4s;
          -ms-animation-iteration-count:5;

          animation-duration: 3s;
          animation-delay: 4s;
          animation-iteration-count: 5;
}

很方便吧！