以前剛開始入門的時候，經常要為了一些繁瑣的css動畫而耗費較長的時間，有時候其實并不需要JS寫，但是寫css3動畫并不會比js動畫輕松，直到認識了animate.css，大大的減輕了負擔。簡單的介紹animare原理，給大家認識下。
簡答介紹
animate.css 是一個來自國外的 CSS3 動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。
雖然借助 animate.css 能夠很方便、快速的制作 CSS3 動畫效果，但還是建議看看 animate.css 的代碼，也許你能從中學到一些東西。
注意：瀏覽器兼容：當然是只兼容支持 CSS3 animate 屬性的瀏覽器，他們分別是：IE10+、Firefox、Chrome、Opera、Safari。
使用方法
A.下載css庫
B.引入
<link rel="stylesheet" href="animate.min.css">
C.給指定的元素加上樣式名字
<div class="animated bounceOutLeft"></div>
名字包括兩個：
第一個為anmated （如果要運用圖標庫就要使用，就一定要寫上這個class類名）
第二個是制定動畫名稱，分享網址給大家http://www.jq22.com/yanshi819
劃線的地方就是動畫的類名，可以下拉選擇自己喜歡的，然后預覽后再寫到項目內。
以上就是基本的用法
拓展方法
A.通過JQ的方法可以動態的添加class
$(function(){
$('#dowebok').addClass('animated bounce');
});
B.有時候一些默認設置并不是我們想要的，這個時候可以添加一個ID，進行手動設置改元素的動畫，或者間接修改屬性
#dowebok {
animate-duration: 2s; //動畫持續時間
animate-delay: 1s; //動畫延遲時間
animate-iteration-count: 2; //動畫執行次數
}
因為是css3的庫，所以適合放到很多項目中，當然也十分輕便，現在的Vue里也經常結合著使用，非常好上手的css庫。
