animate.css使用文檔

step1：下載/引入

• 鏈接：https://daneden.github.io/animate.css/

 

• 或者使用npm：

npm install animate.css save

• 或者使用yarn：

 yarn add animate.css

• CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

 
 
step2：綁定樣式

<h1 class="animated bounceOutRight">animate demo</h1>

可以通過添加：infinite 來設置為一直循環：

<h1 class="animated infinite bounceOutRight">animate demo</h1>

設置延時執行：

<h1 class="animated infinite bounceOutRight delay-2s">animate demo</h1>
<! delay-2s 表示2秒之後再執行該動畫 >

 
step3：通過js控制樣式

<span class="span1">animate demo</span>
<script>
let el = document.querySelector(".span1");
el.classList.add("animated", "bounceOutRight")
</script>

這樣也可以給指定的元素綁定動畫效果，也可以使用函數封裝，然後通過事件觸發。
 
step4：綁定動畫結束事件

<span class="span1">animate demo</span>
<script>
let el = document.querySelector(".span1");
el.classList.add("animated", "bounceOutRight")
// 這裏給元素綁定動畫執行完畢之後的事件
el.addEventListener('animationend', function() { eventEnd() })
function eventEnd() {
 el.classList.remove("bounceOutLeft")
}
</script>