动画库Animate.css
生活随笔
收集整理的這篇文章主要介紹了
动画库Animate.css
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
筆記分享：
用法：到官網(wǎng)(http://daneden.github.io/animate.css/)，下載animate.min.css文件。點(diǎn)擊這里
1、首先引入animate css文件
<head><link?rel="stylesheet"?href="animate.min.css"> </head>2、給指定的元素加上指定的動(dòng)畫樣式名
<div?class="animated?bounceOutLeft"></div>這里包括兩個(gè)class名，第一個(gè)是基本的，必須添加的樣式名，任何想實(shí)現(xiàn)的元素都得添加這個(gè)。第二個(gè)是指定的動(dòng)畫樣式名。
您可以更改動(dòng)畫的持續(xù)時(shí)間，增加延遲或改變顯示次數(shù)：
#yourElement {-vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }注意：一定要在CSS恬當(dāng)?shù)牡那熬Y(webkit, moz等)代替“vendor”
3、如果說想給某個(gè)元素動(dòng)態(tài)添加動(dòng)畫樣式，可以通過jquery來實(shí)現(xiàn)：
$('#yourElement').addClass('animated?bounceOutLeft');?
4、當(dāng)動(dòng)畫效果執(zhí)行完成后還可以通過以下代碼添加事件，可以檢測動(dòng)畫結(jié)束事件：
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);注：jQuery.one（） 最多執(zhí)行事件處理一次。查看手冊了解更多
轉(zhuǎn)載于:https://www.cnblogs.com/wuzhiquan/p/4936857.html
新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！總結(jié)
以上是生活随笔為你收集整理的动画库Animate.css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【noi 2.6_2421】Exchan
- 下一篇： 怎么在html页面和js里判断是否是IE