當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

动画库Animate.css

發(fā)布時間：2025/3/17 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了动画库Animate.css 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

筆記分享：

用法：到官網(wǎng)(http://daneden.github.io/animate.css/)，下載animate.min.css文件。點(diǎn)擊這里

1、首先引入animate css文件

2、給指定的元素加上指定的動畫樣式名

<div?class="animated?bounceOutLeft"></div>

這里包括兩個class名，第一個是基本的，必須添加的樣式名，任何想實(shí)現(xiàn)的元素都得添加這個。第二個是指定的動畫樣式名。

您可以更改動畫的持續(xù)時間，增加延遲或改變顯示次數(shù)：

#yourElement {-vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }

注意：一定要在CSS恬當(dāng)?shù)牡那熬Y(webkit, moz等)代替“vendor”

3、如果說想給某個元素動態(tài)添加動畫樣式，可以通過jquery來實(shí)現(xiàn)：

$('#yourElement').addClass('animated?bounceOutLeft');

4、當(dāng)動畫效果執(zhí)行完成后還可以通過以下代碼添加事件，可以檢測動畫結(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ā)博客就能抽獎！定制產(chǎn)品紅包拿不停！

以上是生活随笔為你收集整理的动画库Animate.css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。