可能是最强大的【CSS】动画库
強大易用的跨平臺的預設 CSS3 動畫庫推薦
在前端開發中，想讓頁面變得更生動自然，往往需要添加一些小動畫，比如漸隱漸現、搖擺等。
通過 CSS3 提供的 keyframes 規則，我們可以自己實現各種各樣復雜的動畫效果。但是很多同學可能對動畫開發并不熟悉，簡單的動畫代碼倒是還能寫一點，但是要做出自然順滑的動畫，需要的不止是代碼功底，更需要設計能力和經驗。
比如彈跳動畫，代碼類似這樣：
@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);}... }上述代碼中使用了不少貝塞爾曲線函數，再加上各種系數，看著就非常復雜。
還好有一個非常強大的開源 CSS 動畫庫 Animate.css，內置了很多常用的 CSS3 動畫，兼容性好使用方便，并且整個文件非常輕小，只有幾十 k！
使用方式非常簡單，比如我們要給某段文字添加一個彈跳動畫，首先引入 Animate.css 樣式文件，在生產環境中建議引入壓縮過的 min 文件，還可以使用 CDN 進行加速。
引入代碼如下：
<head><link rel="stylesheet" href="animate.min.css"> </head>第二步，進入 Animate.css 提供的動畫演示站點，選擇自己想要的動畫效果。演示網站非常貼心，點擊標簽后，能夠立刻查看到動畫效果，方便選擇。
第三步，給你想要添加動畫的 html 元素加上 “animated” 和上一步中選中的動畫樣式名稱即可：
<div class="animated fadeInUp"></div>Animate.css 本身是純 CSS 實現，不支持動態添加類名，所以想要給某元素動態添加樣式（比如點擊后彈跳），需要配合 JavaScript 或 jQuery 實現。
最后，對于想要學習 CSS 動畫的同學，Animate.css 的源碼也非常值得一看哦！
🔍 項目地址：https://www.code-nav.cn/rd/?rid=023ce9555ff839e703d196d205e93bce
在 編程導航 中還能發現更多優質編程學習資源，歡迎分享給有需要的同學吧！
總結
以上是生活随笔為你收集整理的可能是最强大的【CSS】动画库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 当程序员真难，又一次被编辑器坑了！
- 下一篇： 内推学弟进了腾讯，看看他的标杆简历！