動畫利器animate.css

使用過CSS3編寫動畫的同窗必定感嘆CSS3的強大，可是也會感到書寫的麻煩。每次都要計算動畫的各個參數，十分麻煩。有沒有一個庫能封裝一些經常使用的CSS3動畫效果。答案是確定的，animate.css就是一個很好的CSS庫，github地址：https://github.com/daneden/animate.css 。下面咱們一塊兒來看一看如何使用它。

點擊上面的連接，就能夠看到一個很簡約的頁面，其實這個頁面就是animate.css的API 文檔。在頁面中間的下拉框中選擇一個動畫類，再點擊旁邊的按鈕，就能夠看到上方的文字上的動畫。

那麼，咱們在實際的開發中又該如何使用animate.css。好比我有一個div須要使用bounce動畫。那麼就能夠以下面的方法來編寫：

1 <div id="animate-1" class="animated">演示bounce動畫</div>

注意class=「animated」 是調用動畫必備的，而後就在須要的時候調用：

1 $('.animate-1').addClass('bounce');

這樣，就能夠看到動畫了。我簡單試了一下，這些動畫在移動平臺上也是能夠用的。