首頁 > 開發者 > JavaScript
Animate.css 一款牛逼的css3動畫庫，animate.csscss3
Animate.css是一款很牛逼的，跨瀏覽器的css3動畫庫，使用方法也很簡單只要引入一個animate.min.css就可以了，
簡單使用 1 首先引入 animate的 css 檔案樣式cdn檔案
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head>
下載到本地
<head> <link rel="stylesheet" href="animate.min.css"> </head>
2 給指定元素止指定樣式
我們看到有三個class ，其中第一個animated 是基本樣式，所有要產生動畫的元素都需要，第二個infinite是可 選的,如果加了這個類，動畫將迴圈執行，第三個就是動畫特效了 ，目前animated 已經有很多動畫特效了具體可 以點擊這裡查看 www.siyouku.cn/wenqing/animation
<div id="demoimg" class="animated infinite bounce"> <img>$('#demoimg').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
4 有時候我們需要自定我們對動畫的一些設定我們可以用下面的代碼實現
#demoimg { -vendor-animation-duration: 3s; //動畫期間 -vendor-animation-delay: 2s; //動畫延遲時間 -vendor-animation-iteration-count: infinite; //動畫執行次數,這裡是一直執行}
相關連結
動畫demo：www.siyouku.cn/wenqing/animation
github：github.com/daneden/animate.css
本文永久更新地址：www.siyouku.cn/article/6827.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
