animate.css是一個css3動畫庫,里面預(yù)設(shè)了很多種常用的動畫,使用簡單,因為它是把不同的動畫寫到了不同的類里,所以我們想要使用哪種動畫的時候,只需要簡單的類添加到元素上就行了:
1、首先引入animate css文件
百度cdn:
2、給指定的元素加上指定的動畫樣式名
這里包括兩個class名,第一個是必須添加的樣式名,任何想實現(xiàn)的元素都得添加這個。第二個是指定的動畫樣式名。比如我們官方網(wǎng)站頭部就引用了這個動畫:
3、如果說想給某個元素動態(tài)添加動畫樣式,可以通過jquery追加class來實現(xiàn),同樣animated是必帶,第二個是動畫:
$('#yourElement').addClass('animated bounceOutLeft');
4、你可以更改動畫默認(rèn)持續(xù)的時間:animate-duration: 1s; 動畫延遲時間:animate-delay: 1s; 動畫執(zhí)行次數(shù):animate-iteration-count: 1;
設(shè)置完以上的內(nèi)容這個動畫就可以執(zhí)行了,他的動畫效果非常多,具體可以去他的演示網(wǎng)站參考。
上一篇: 如何做出可以移動的廣告特效
下一篇: css3過渡動畫的使用