介紹

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)與任何動畫名稱一起添加到元素中，那么一個簡單的動畫效果就實現了，一下就是一個最簡單的例子：

---

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')// oranimateCSS('.my-element', 'bounce', function() { // Do something after animation})

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

---

---

• 設定延遲和速度：

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

Example

---

• 快慢class

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

Example

---

• 自定義構建

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

總結

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

總結

以上是生活随笔為你收集整理的使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。