官網:https://daneden.github.io/animate.css/ animate.css 是一款跨瀏覽器的動畫庫。 使用方式: 在頁面的 <head>中引入樣式文件: 給你想要添加動畫效果的元素加上 animated 樣式,如果想要動畫迴圈執行的話,你需要加上 infinite 樣 ...
官網: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