可能是最强大的【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 滤镜