介紹

animate.css是一堆很酷，有趣且跨瀏覽器的動畫，供你在項目中使用。非常適合強調，主頁，滑塊和一般的加水效果。

---

---

animate.css v4正在進行許多改進和重大更改，包括CSS自定義屬性支持（又稱CSS變量）和類前綴，以確保安全使用。感興趣的小夥伴可以上github關注進展以及提供反饋！

Github

animate.css的受歡迎程度毋庸置疑，在Github上star數高達接近63k，這是一個非常可觀的數據，我相信其實大多數人或多或少都用過它

https://daneden.github.io/animate.css/

---

---

安裝使用

• 使用npm安裝

$ npm install animate.css --save

或者 yarn:

$ yarn add animate.css

---

要在你網站中使用animate.css，只需將樣式表放入文檔的

中，然後將動畫類（animated）與任何動畫名稱一起添加到元素中，那麼一個簡單的動畫效果就實現了，一下就是一個最簡單的例子：

 <link>

---

Example

---

以下是你可以使用的所用動畫效果class

---

---

可以更改動畫的持續時間，添加延遲或更改動畫播放的次數：

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

---

---

• JavaScript的用法：

將animate.css與Javascript結合使用時，可以使用animate.css進行大量其他工作。一個簡單的例子：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

還可以檢測動畫何時結束：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })

可以使用以下簡單功能來添加和刪除動畫：

function animateCSS(element, animationName, callback) {
 const node = document.querySelector(element)
 node.classList.add('animated', animationName)
 function handleAnimationEnd() {
 node.classList.remove('animated', animationName)
 node.removeEventListener('animationend', handleAnimationEnd)
 if (typeof callback === 'function') callback()
 }
 node.addEventListener('animationend', handleAnimationEnd)
}

並像這樣使用它：

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
 // Do something after animation
})

注意，這些示例使用的是ES6的const聲明，不再支持IE10和某些古老的瀏覽器。

---

---

• 設定延遲和速度：

可以直接在元素的class屬性上添加延遲，如下所示：

Example

---

• 快慢class

通過添加這些類，可以控制動畫的速度，如下所示：

Example

---

• 自定義構建

Animate.css由gulp.js提供支持，這意味著你可以輕鬆創建自定義版本。

總結

有些時候你看到別人的網站，感覺速度也不是很快，但是很自然，那麼很有可能是使用了動畫，使用動畫不會加快網站的訪問速度，但是可以讓網頁瀏覽器來更加的平滑、更加的自然，使用起來會感覺很舒適，不會給人卡頓的感覺！