本節(jié)目錄
- Animate.css簡介
- Animate.css基礎(chǔ)用法
- Animate.css配合JS的用法和講解
- 自定義Animate.css動(dòng)畫屬性
【簡介】
官網(wǎng)：Animate.css
看看來自官方的介紹：Animate.css 就像嗑水那么簡單的CSS動(dòng)畫。
Animate.css是一個(gè)純CSS動(dòng)畫庫。
不兼容IE10以下的IE瀏覽器。
其他各大瀏覽器只要不是太舊的版本都能兼容恼布。
所以說兼容性還是蠻強(qiáng)的搬设。
官方給出了70多種動(dòng)畫特效撮抓。
這些動(dòng)畫其實(shí)大多數(shù)都不是很難教届，就是不愿意去寫橙困。所以這個(gè)CSS庫真的很適合懶人（所有人）署驻。
【基礎(chǔ)用法】
首先下載（引入）Animate.css
可以到github上下載源碼（在官網(wǎng)也能找到）~
<!-- 引入 -->
<head>
<link rel="stylesheet" >
</head>
我用一個(gè)div簡單舉個(gè)小例子
<!-- HTML代碼 -->
<div id="box"></div>
給這個(gè)div一點(diǎn)樣式奋献，讓它能夠顯示出來。
/* CSS代碼 */
#box {
width: 100px;
height: 100px;
background: paleturquoise;
margin: 100px auto;
}
/* 樣式是隨便寫的旺上，只要能用肉眼看到這個(gè)div就行 */
在這個(gè)基礎(chǔ)上瓶蚂，直接給id為box的div加類就行了。
首先要有一個(gè)基礎(chǔ)類 “animated” 宣吱，如果沒這個(gè)類扬跋，其他都是無用功！
然后在后面再加一個(gè)動(dòng)畫類凌节，就能實(shí)現(xiàn)動(dòng)畫效果了（這里我用那個(gè)了bounce這個(gè)動(dòng)畫）钦听。
<!-- HTML代碼 -->
<div id="box" class="animated bounce"></div>
這里加了 “bounce” 這個(gè)動(dòng)畫效果
官方還給出很多效果，詳情可查看
官方文檔
除了動(dòng)畫效果倍奢，通常我們還有一些別的需求朴上。比如動(dòng)畫循環(huán)執(zhí)行、動(dòng)畫延時(shí)執(zhí)行卒煞、動(dòng)畫執(zhí)行時(shí)長痪宰。這些設(shè)置，Animate.css都給我們實(shí)現(xiàn)了畔裕。同樣也只需配置幾個(gè)類名衣撬，完全不用JS控制。
需要延時(shí)執(zhí)行扮饶，官方給出上面幾個(gè)類讓我們選擇具练。
- delay-2s：2秒后再執(zhí)行動(dòng)畫
- delay-3s：3秒后再執(zhí)行動(dòng)畫
- delay-4s：4秒后再執(zhí)行動(dòng)畫
- delay-5s：5秒后再執(zhí)行動(dòng)畫
上面這幾個(gè)類是設(shè)置動(dòng)畫的執(zhí)行時(shí)長。
- slow：用2秒執(zhí)行完動(dòng)畫
- slower：用3秒執(zhí)行完動(dòng)畫
- fast：用0.8秒執(zhí)行完動(dòng)畫
- faster：用0.5秒執(zhí)行完動(dòng)畫
最后甜无，如果要設(shè)置無限重復(fù)執(zhí)行動(dòng)畫扛点，可用下面這個(gè)類
infinite
以上就是基本的設(shè)置。
【用JS控制】
上面的例子岂丘，都是在頁面加載后立即執(zhí)行動(dòng)畫陵究。
有時(shí)候需要觸發(fā)某些事件后才給出相應(yīng)的動(dòng)畫。比如點(diǎn)一下按鈕才會出現(xiàn)動(dòng)畫奥帘。這時(shí)官方也給出一個(gè)簡單的JS例子铜邮。
<!-- HTML代碼 -->
<div id="box"></div>
<button id="btn">btn</button>
<!-- 設(shè)置了一個(gè)div和一個(gè)按鈕 -->
/* CSS代碼 */
#box {
width: 100px;
height: 100px;
background: paleturquoise;
margin: 100px auto;
}
/* JS代碼 *//* 定義animateCss函數(shù)（傳過來的元素，動(dòng)畫名，回調(diào)函數(shù)） */
function animateCss(element, animationName, callback) {
/* 獲取傳過來的 */
const node = document.querySelector(element);
/* 給元素加上基礎(chǔ)類animated松蒜，還有動(dòng)畫類 */
node.classList.add('animated', animationName);
function handleAnimationEnd() {
/* 移除基礎(chǔ)類和動(dòng)畫類 */
node.classList.remove('animated', animationName);
/* 解除當(dāng)前元素的事件監(jiān)聽 */
node.removeEventListener('animationend', handleAnimationEnd); /* 如果有回調(diào)函數(shù)扔茅，就執(zhí)行回調(diào)函數(shù) */
if (typeof callback === 'function') callback();
}
/* 通過事件監(jiān)聽，當(dāng)動(dòng)畫結(jié)束后牍鞠，執(zhí)行handleAnimationEnd函數(shù) */
node.addEventListener('animationend', handleAnimationEnd);
}
/*點(diǎn)擊按鈕后觸發(fā)animateCss函數(shù)*/
btn.onclick = function() {
animateCss('#box', 'bounce')
};
這個(gè)例子用到了JS的事件監(jiān)聽：addEventListener
animationend：當(dāng)CSS3動(dòng)畫結(jié)束后咖摹。
animationend是一個(gè)事件，就類似于onclick难述。
【自定義動(dòng)畫】
要修改或者添加一個(gè)動(dòng)畫類萤晴，或者添加一個(gè)參數(shù)類，可以參照Animate.css里的寫法胁后。在自己的css文件里寫（不建議直接修改Animate.css文件）店读。
比如要修改動(dòng)畫默認(rèn)執(zhí)行時(shí)間
先找到animated這個(gè)類
我搜到在這里，然后把.animated這個(gè)類復(fù)制出來攀芯，放到自己的css文件里面
這里我把默認(rèn)執(zhí)行時(shí)間改成2秒屯断。
這樣就會覆蓋Animate里的默認(rèn)1秒。
因?yàn)椴皇侵苯痈腁nimate.css這個(gè)庫侣诺，所以其他頁面是不會受到影響的殖演。
如果需要添加其他屬性，可以抄Animate.css的寫法年鸳。
比如我需要一個(gè)300毫秒延時(shí)執(zhí)行趴久。可以這樣寫
/* CSS代碼 */
.animated.delay-03s {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
