可能是最強(qiáng)大的 CSS 動(dòng)畫(huà)庫(kù)！
作者丨李魚(yú)皮
來(lái)源丨編程導(dǎo)航
強(qiáng)大易用的跨平臺(tái)的預(yù)設(shè) CSS3 動(dòng)畫(huà)庫(kù)推薦
在前端開(kāi)發(fā)中，想讓頁(yè)面變得更生動(dòng)自然，往往需要添加一些小動(dòng)畫(huà)，比如漸隱漸現(xiàn)、搖擺等。
通過(guò) CSS3 提供的 keyframes 規(guī)則，我們可以自己實(shí)現(xiàn)各種各樣復(fù)雜的動(dòng)畫(huà)效果。但是很多同學(xué)可能對(duì)動(dòng)畫(huà)開(kāi)發(fā)并不熟悉，簡(jiǎn)單的動(dòng)畫(huà)代碼倒是還能寫(xiě)一點(diǎn)，但是要做出自然順滑的動(dòng)畫(huà)，需要的不止是代碼功底，更需要設(shè)計(jì)能力和經(jīng)驗(yàn)。
比如彈跳動(dòng)畫(huà)，代碼類(lèi)似這樣：
@keyframes bounce {
from,
20%,
53%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
...
}
上述代碼中使用了不少貝塞爾曲線(xiàn)函數(shù)，再加上各種系數(shù)，看著就非常復(fù)雜。
還好有一個(gè)非常強(qiáng)大的開(kāi)源 CSS 動(dòng)畫(huà)庫(kù) Animate.css，內(nèi)置了很多常用的 CSS3 動(dòng)畫(huà)，兼容性好使用方便，并且整個(gè)文件非常輕小，只有幾十 k！
使用方式非常簡(jiǎn)單，比如我們要給某段文字添加一個(gè)彈跳動(dòng)畫(huà)，首先引入 Animate.css 樣式文件，在生產(chǎn)環(huán)境中建議引入壓縮過(guò)的 min 文件，還可以使用 CDN 進(jìn)行加速。
引入代碼如下：
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
第二步，進(jìn)入 Animate.css 提供的動(dòng)畫(huà)演示站點(diǎn)，選擇自己想要的動(dòng)畫(huà)效果。演示網(wǎng)站非常貼心，點(diǎn)擊標(biāo)簽后，能夠立刻查看到動(dòng)畫(huà)效果，方便選擇。
第三步，給你想要添加動(dòng)畫(huà)的 html 元素加上 "animated" 和上一步中選中的動(dòng)畫(huà)樣式名稱(chēng)即可：
<div class="animated fadeInUp"></div>
Animate.css 本身是純 CSS 實(shí)現(xiàn)，不支持動(dòng)態(tài)添加類(lèi)名，所以想要給某元素動(dòng)態(tài)添加樣式（比如點(diǎn)擊后彈跳），需要配合 JavaScript 或 jQuery 實(shí)現(xiàn)。
最后，對(duì)于想要學(xué)習(xí) CSS 動(dòng)畫(huà)的同學(xué)，Animate.css 的源碼也非常值得一看哦！
-End-
最近有一些小伙伴，讓我?guī)兔φ乙恍?nbsp;面試題 資料，于是我翻遍了收藏的 5T 資料后，匯總整理出來(lái)，可以說(shuō)是程序員面試必備！所有資料都整理到網(wǎng)盤(pán)了，歡迎下載！
面試題】即可獲取
好文分享給更多人↓↓