Animate.css(一款有意思的CSS3動畫庫)
阿新 • • 發佈：2017-12-04
element 自己的 spa 使用 來替 amp example 持續時間 css
官網：https://daneden.github.io/animate.css/
animate.css 是一款跨瀏覽器的動畫庫。
使用方式：
-
在頁面的
<head>中引入樣式文件：<head> <link rel="stylesheet" href="animate.min.css"> </head>
-
給你想要添加動畫效果的元素加上
animated樣式，如果想要動畫循環執行的話，你需要加上infinite樣式。 - 具體樣式在官網一一列舉出來啦，而且可以直接查看效果，很炫酷啊！
例子：
<h1 class="animated infinite bounce">Example</h1>
當你將 animate.css 與 jQuery 一起使用或者添加你自己的 CSS 規則時， 你可以用 animate.css 做一大堆其他的事，使用 jQuery 動態添加動畫：
$(‘#yourElement‘).addClass(‘animated bounceOutLeft‘);
你也可以檢測一個動畫是否結束了：
$(‘#yourElement‘).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘, doSomething);
註意： jQuery.one() 用在你希望只執行事件一次 的時候。
你可以改變動畫的持續時間，添加延遲或改變它執行的次數：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
註意：確保用供應商的前綴（webkit, moz, 等等）來替換上面CSS中的 vendor
Animate.css(一款有意思的CSS3動畫庫)