可能是最強(qiáng)大的【CSS】動(dòng)畫庫
強(qiáng)大易用的跨平臺(tái)的預(yù)設(shè) CSS3 動(dòng)畫庫推薦
在前端開發(fā)中，想讓頁面變得更生動(dòng)自然，往往需要添加一些小動(dòng)畫，比如漸隱漸現(xiàn)、搖擺等。
通過 CSS3 提供的 keyframes 規(guī)則，我們可以自己實(shí)現(xiàn)各種各樣復(fù)雜的動(dòng)畫效果。但是很多同學(xué)可能對(duì)動(dòng)畫開發(fā)并不熟悉，簡(jiǎn)單的動(dòng)畫代碼倒是還能寫一點(diǎn)，但是要做出自然順滑的動(dòng)畫，需要的不止是代碼功底，更需要設(shè)計(jì)能力和經(jīng)驗(yàn)。
比如彈跳動(dòng)畫，代碼類似這樣：
@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);
??}
??...
}
上述代碼中使用了不少貝塞爾曲線函數(shù)，再加上各種系數(shù)，看著就非常復(fù)雜。
還好有一個(gè)非常強(qiáng)大的開源 CSS 動(dòng)畫庫 Animate.css，內(nèi)置了很多常用的 CSS3 動(dòng)畫，兼容性好使用方便，并且整個(gè)文件非常輕小，只有幾十 k！
使用方式非常簡(jiǎn)單，比如我們要給某段文字添加一個(gè)彈跳動(dòng)畫，首先引入 Animate.css 樣式文件，在生產(chǎn)環(huán)境中建議引入壓縮過的 min 文件，還可以使用 CDN 進(jìn)行加速。
引入代碼如下：
<head>
??<link?rel="stylesheet"?href="animate.min.css">
</head>
第二步，進(jìn)入 Animate.css 提供的動(dòng)畫演示站點(diǎn)，選擇自己想要的動(dòng)畫效果。演示網(wǎng)站非常貼心，點(diǎn)擊標(biāo)簽后，能夠立刻查看到動(dòng)畫效果，方便選擇。
第三步，給你想要添加動(dòng)畫的 html 元素加上 "animated" 和上一步中選中的動(dòng)畫樣式名稱即可：
?<div?class="animated?fadeInUp"></div>
Animate.css 本身是純 CSS 實(shí)現(xiàn)，不支持動(dòng)態(tài)添加類名，所以想要給某元素動(dòng)態(tài)添加樣式（比如點(diǎn)擊后彈跳），需要配合 JavaScript 或 jQuery 實(shí)現(xiàn)。
最后，對(duì)于想要學(xué)習(xí) CSS 動(dòng)畫的同學(xué)，Animate.css 的源碼也非常值得一看哦！
?? 項(xiàng)目地址：https://www.code-nav.cn/rd/?rid=023ce9555ff839e703d196d205e93bce
在 編程導(dǎo)航 中還能發(fā)現(xiàn)更多優(yōu)質(zhì)編程學(xué)習(xí)資源，歡迎分享給有需要的同學(xué)吧！
