以前剛開(kāi)始入門(mén)的時(shí)候，經(jīng)常要為了一些繁瑣的css動(dòng)畫(huà)而耗費(fèi)較長(zhǎng)的時(shí)間，有時(shí)候其實(shí)并不需要JS寫(xiě)见秽，但是寫(xiě)css3動(dòng)畫(huà)并不會(huì)比js動(dòng)畫(huà)輕松，直到認(rèn)識(shí)了animate.css讨盒，大大的減輕了負(fù)擔(dān)解取。簡(jiǎn)單的介紹animare原理，給大家認(rèn)識(shí)下返顺。
簡(jiǎn)答介紹
animate.css 是一個(gè)來(lái)自國(guó)外的 CSS3 動(dòng)畫(huà)庫(kù)禀苦，它預(yù)設(shè)了抖動(dòng)（shake）、閃爍（flash）遂鹊、彈跳（bounce）振乏、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）秉扑、淡入淡出（fadeIn/fadeOut）等多達(dá) 60 多種動(dòng)畫(huà)效果昆码，幾乎包含了所有常見(jiàn)的動(dòng)畫(huà)效果。
雖然借助 animate.css 能夠很方便、快速的制作 CSS3 動(dòng)畫(huà)效果赋咽，但還是建議看看 animate.css 的代碼，也許你能從中學(xué)到一些東西吨娜。
注意：瀏覽器兼容：當(dāng)然是只兼容支持 CSS3 animate 屬性的瀏覽器脓匿，他們分別是：IE10+、Firefox宦赠、Chrome陪毡、Opera、Safari勾扭。
使用方法
A.下載css庫(kù)
B.引入
<link rel="stylesheet" href="animate.min.css">
C.給指定的元素加上樣式名字
<div class="animated bounceOutLeft"></div>
名字包括兩個(gè)：
第一個(gè)為anmated （如果要運(yùn)用圖標(biāo)庫(kù)就要使用毡琉，就一定要寫(xiě)上這個(gè)class類(lèi)名）
第二個(gè)是制定動(dòng)畫(huà)名稱(chēng)，分享網(wǎng)址給大家http://www.jq22.com/yanshi819
劃線(xiàn)的地方就是動(dòng)畫(huà)的類(lèi)名妙色，可以下拉選擇自己喜歡的桅滋，然后預(yù)覽后再寫(xiě)到項(xiàng)目?jī)?nèi)。
以上就是基本的用法
拓展方法
A.通過(guò)JQ的方法可以動(dòng)態(tài)的添加class
$(function(){
$('#dowebok').addClass('animated bounce');
});
B.有時(shí)候一些默認(rèn)設(shè)置并不是我們想要的身辨，這個(gè)時(shí)候可以添加一個(gè)ID丐谋，進(jìn)行手動(dòng)設(shè)置改元素的動(dòng)畫(huà)，或者間接修改屬性
#dowebok {
animate-duration: 2s; //動(dòng)畫(huà)持續(xù)時(shí)間
animate-delay: 1s; //動(dòng)畫(huà)延遲時(shí)間
animate-iteration-count: 2; //動(dòng)畫(huà)執(zhí)行次數(shù)
}
因?yàn)槭莄ss3的庫(kù)煌珊，所以適合放到很多項(xiàng)目中号俐，當(dāng)然也十分輕便，現(xiàn)在的Vue里也經(jīng)常結(jié)合著使用定庵，非常好上手的css庫(kù)吏饿。
