本節目錄
- Animate.css簡介
- Animate.css基礎用法
- Animate.css配合JS的用法和講解
- 自定義Animate.css動畫屬性
【簡介】
官網：Animate.css
看看來自官方的介紹：Animate.css 就像嗑水那么簡單的CSS動畫。
Animate.css是一個純CSS動畫庫。
不兼容IE10以下的IE瀏覽器。
其他各大瀏覽器只要不是太舊的版本都能兼容。
所以說兼容性還是蠻強的。
官方給出了70多種動畫特效。
這些動畫其實大多數都不是很難，就是不愿意去寫。所以這個CSS庫真的很適合懶人（所有人）。
【基礎用法】
首先下載（引入）Animate.css
可以到github上下載源碼（在官網也能找到）~
<!-- 引入 -->
<head>
<link rel="stylesheet" >
</head>
我用一個div簡單舉個小例子
<!-- HTML代碼 -->
<div id="box"></div>
給這個div一點樣式，讓它能夠顯示出來。
/* CSS代碼 */
#box {
width: 100px;
height: 100px;
background: paleturquoise;
margin: 100px auto;
}
/* 樣式是隨便寫的，只要能用肉眼看到這個div就行 */
在這個基礎上，直接給id為box的div加類就行了。
首先要有一個基礎類 “animated” ，如果沒這個類，其他都是無用功！
然后在后面再加一個動畫類，就能實現動畫效果了（這里我用那個了bounce這個動畫）。
<!-- HTML代碼 -->
<div id="box" class="animated bounce"></div>
這里加了 “bounce” 這個動畫效果
官方還給出很多效果，詳情可查看
官方文檔
除了動畫效果，通常我們還有一些別的需求。比如動畫循環執行、動畫延時執行、動畫執行時長。這些設置，Animate.css都給我們實現了。同樣也只需配置幾個類名，完全不用JS控制。
需要延時執行，官方給出上面幾個類讓我們選擇。
- delay-2s：2秒后再執行動畫
- delay-3s：3秒后再執行動畫
- delay-4s：4秒后再執行動畫
- delay-5s：5秒后再執行動畫
上面這幾個類是設置動畫的執行時長。
- slow：用2秒執行完動畫
- slower：用3秒執行完動畫
- fast：用0.8秒執行完動畫
- faster：用0.5秒執行完動畫
最后，如果要設置無限重復執行動畫，可用下面這個類
infinite
以上就是基本的設置。
【用JS控制】
上面的例子，都是在頁面加載后立即執行動畫。
有時候需要觸發某些事件后才給出相應的動畫。比如點一下按鈕才會出現動畫。這時官方也給出一個簡單的JS例子。
<!-- HTML代碼 -->
<div id="box"></div>
<button id="btn">btn</button>
<!-- 設置了一個div和一個按鈕 -->
/* CSS代碼 */
#box {
width: 100px;
height: 100px;
background: paleturquoise;
margin: 100px auto;
}
/* JS代碼 *//* 定義animateCss函數（傳過來的元素，動畫名，回調函數） */
function animateCss(element, animationName, callback) {
/* 獲取傳過來的 */
const node = document.querySelector(element);
/* 給元素加上基礎類animated，還有動畫類 */
node.classList.add('animated', animationName);
function handleAnimationEnd() {
/* 移除基礎類和動畫類 */
node.classList.remove('animated', animationName);
/* 解除當前元素的事件監聽 */
node.removeEventListener('animationend', handleAnimationEnd); /* 如果有回調函數，就執行回調函數 */
if (typeof callback === 'function') callback();
}
/* 通過事件監聽，當動畫結束后，執行handleAnimationEnd函數 */
node.addEventListener('animationend', handleAnimationEnd);
}
/*點擊按鈕后觸發animateCss函數*/
btn.onclick = function() {
animateCss('#box', 'bounce')
};
這個例子用到了JS的事件監聽：addEventListener
animationend：當CSS3動畫結束后。
animationend是一個事件，就類似于onclick。
【自定義動畫】
要修改或者添加一個動畫類，或者添加一個參數類，可以參照Animate.css里的寫法。在自己的css文件里寫（不建議直接修改Animate.css文件）。
比如要修改動畫默認執行時間
先找到animated這個類
我搜到在這里，然后把.animated這個類復制出來，放到自己的css文件里面
這里我把默認執行時間改成2秒。
這樣就會覆蓋Animate里的默認1秒。
因為不是直接改Animate.css這個庫，所以其他頁面是不會受到影響的。
如果需要添加其他屬性，可以抄Animate.css的寫法。
比如我需要一個300毫秒延時執行?？梢赃@樣寫
/* CSS代碼 */
.animated.delay-03s {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
