可能是最强大的【CSS】动画库
強(qiáng)大易用的跨平臺(tái)的預(yù)設(shè) CSS3 動(dòng)畫庫(kù)推薦
在前端開(kāi)發(fā)中，想讓頁(yè)面變得更生動(dòng)自然，往往需要添加一些小動(dòng)畫，比如漸隱漸現(xiàn)、搖擺等。
通過(guò) CSS3 提供的 keyframes 規(guī)則，我們可以自己實(shí)現(xiàn)各種各樣復(fù)雜的動(dòng)畫效果。但是很多同學(xué)可能對(duì)動(dòng)畫開(kāi)發(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)大的開(kāi)源 CSS 動(dòng)畫庫(kù) Animate.css，內(nèi)置了很多常用的 CSS3 動(dòng)畫，兼容性好使用方便，并且整個(gè)文件非常輕小，只有幾十 k！
使用方式非常簡(jiǎn)單，比如我們要給某段文字添加一個(gè)彈跳動(dòng)畫，首先引入 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)畫演示站點(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é)吧！
總結(jié)
以上是生活随笔為你收集整理的可能是最强大的【CSS】动画库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 当程序员真难，又一次被编辑器坑了！
- 下一篇： [CSS]RevealTrans 滤镜