十個好用的 CSS 動畫庫，你知道幾個？
在過去的很多年時間里，開發(fā)人員想要在網(wǎng)頁上顯示動畫，只能借助于Flash播放器和GIF圖片。
然而，隨著CSS3引入關(guān)鍵幀、過渡和動畫屬性，創(chuàng)建燃爆人眼球的抽象動畫變得容易起來。CSS3更新不但允許創(chuàng)建動畫，甚至可以呈現(xiàn)各種偽狀態(tài)（即懸停、聚焦等）。這些都是劃時代的進步。
使用這些屬性創(chuàng)建動畫非常簡單。首先，定義包含首選動畫序列的keyframes規(guī)則：
@keyframes float {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 15px);
}
100% {
transform: translate(0, -0px);
}
}我們在上面定義了一個命名為float的關(guān)鍵幀，該關(guān)鍵幀在動畫流的0%處將元素translate屬性設(shè)置為平移0%，50%處沿y軸向上平移15px，100%處平移回0%。
然后，我們可以通過animation屬性將此關(guān)鍵幀流應(yīng)用于元素：
.element {
animation: floating 3s ease-in-out infinite;
}
/* 或者 */
.element:hover {
animation: floating 3s ease-in-out infinite;
}我們發(fā)現(xiàn)，創(chuàng)建簡單的浮動動畫就需要大量代碼，要是處理更復(fù)雜的動畫，代碼就更長了。動畫庫本質(zhì)上解決了這個問題，有了動畫庫，我們向網(wǎng)頁添加動畫的過程如同向元素添加類名一樣簡單。
這篇文章將介紹用于各種動畫類型，例如簡單運動、元素/頁面過渡、燈箱動畫、加載器、滾動時動畫頁面等等的10個常見的CSS動畫庫和平臺。一起來看看吧。
Animate.css
圖片
Animate.css是最受歡迎的CSS動畫庫之一，截至撰寫本文為止，GitHub上的星星超過76k。只需在想要設(shè)置動畫的元素中包含類名，我們就可以通過Animate.css毫不費力地將多個動畫范圍添加到web應(yīng)用程序中。對于顯示頁面動畫、滑塊動畫以及整體引人注目的動畫，使用Animate.css非常方便。
這個庫包括的實用程序類還允許你直接從標記調(diào)整動畫持續(xù)時間、速度和重復(fù)動畫。你還可以將此庫提供的動畫與本地CSS關(guān)鍵幀屬性集成，并直接從CSS代碼進行調(diào)用。
如何使用
Animate.css可作為npm包提供，也可通過CDN使用：
<head>
<link
rel="stylesheet"
/>
</head>在標記頭部分包含CDN URL后，你可以從可用動畫列表中調(diào)用，如下所示：
<div class="animate__animated animate__pulse">A pulse animated element</div>
<!-- using utility class -->
<div class="animate__animated animate__pulse animate__infinite">A pulse animated element</div>在第一個示例中，我們創(chuàng)建了一個脈沖動畫的div，默認情況下動畫1秒鐘，在第二個示例中，我們將脈沖動畫配置為使用animate__infinite實用程序類（相當于CSSanimation-iteration-count: infinite;）。
文檔地址：https://animate.style/
Github地址：https://github.com/animate-css/animate.css
Animista
Animista與其說是一個庫，不如說是一個CSS動畫平臺，因為它按需提供動畫，即你在平臺可以選擇想要的動畫類型，然后為你生成動畫CSS關(guān)鍵幀代碼。
圖片
從表面上看，Animista上可用的動畫類型與animate.css上提供的動畫類型非常相似，但是，如果深入研究，你會發(fā)現(xiàn)Animista提供了更多有用的動畫類別，特別是在動畫文字和背景元素方面。而且，在你準備導(dǎo)出動畫代碼時，還可以選擇標準下載或壓縮代碼。
如何使用
無需下載任何軟件包，也無需在網(wǎng)站中包含任何CDN鏈接，即可使用Animista：只需訪問主頁，選擇喜歡的動畫，根據(jù)需要自定義動畫序列，就會立即產(chǎn)生代碼。
整個過程如下所示：
圖片
文檔地址：https://docs.google.com/document/d/1jktijADrL3dmwF_td73HJrAD7-x_MY3i6VMtvqKwa1o/edit#
官方地址：https://animista.net/
Animation library
圖片
你可以把Animation library當作是Animate.css的替代方案，因為它們提供類似的動畫類別。但是，與Animate.css不同點在于，Animation library不提供允許設(shè)置首選動畫持續(xù)時間、速度和計時的其他自定義選項。
此外，Animation library源文件被劃分為不同的類 — 例如，淡入淡出動畫的所有變體都位于單個源文件中，其他動畫類也是如此。
如何使用
下載包含所有動畫類別的ZIP文件后，選擇鏈接到其中的文件，并在標記中調(diào)用關(guān)聯(lián)的類名。下面是鏈接rotate.css并使用rotateUpRight樣式的一個示例：
<head>
<link rel="stylesheet" href="path/to/rotate.css">
</head>
<body>
<div class="rotateUpRight">
This div will rotate up right.
</div>
</body>文檔地址：https://animation.kaustubhmenon.com/
Github地址：https://github.com/kaustubhmenon/animation-library
Magic CSS
圖片
Magic CSS也是一個很有趣的動畫庫，與之前介紹的動畫庫相比，它提供的的動畫更具吸引力。軟件包提供的動畫對于頁面過渡非常方便。但是，magic CSS的一個缺點是它不支持Opera迷你瀏覽器。
如何使用
Magic CSS的用法非常簡單。既可以通過npm下載庫，也可以直接下載CSS源文件，并寫到網(wǎng)頁標記中，然后調(diào)用即可：
<head>
<link rel="stylesheet" >
</head>
<body>
<div class="magictime puffIn">
</div>
</body>文檔地址：https://www.minimamente.com/project/magic/
Github地址：https://github.com/miniMAC/magic
lightGallery
圖片
lightGallery與我們之前提到的其他動畫庫不同，它是專門為制作焦點圖動畫而設(shè)計的。焦點圖動畫（如上圖所示）是單擊時以模態(tài)形式覆蓋當前網(wǎng)站的圖像。
lightGallery是一個多功能庫，因為它支持視頻文件，允許你以輪播格式渲染媒體資源，允許你創(chuàng)建自定義插件來擴展或修改功能。同樣值得注意的是，lightGallery并不完全是一個純粹的CSS動畫庫，它的功能依賴于JavaScript。
如何使用
lightGallery可通過npm/yarn、bower獲得，也可通過CDN提供服務(wù)。要使用傳統(tǒng)網(wǎng)頁，首先在網(wǎng)頁中包含CSS和JavaScript CDN鏈接，如下所示：
<head>
<link rel="stylesheet" href="/path/to/lightgallery-bundle.css" />
</head>
<body>
<!-- . . . -->
<script src="/path/to/lightgallery.min.js"></script>
</body>然后，創(chuàng)建元素，該元素將充當要轉(zhuǎn)換為焦點圖的所有圖像的容器：
<div id="lightbox-container">
<a data-lg-size="1600-2400">
<img src="path/to/img" />
</a>
<a data-lg-size="1024-800">
<img src="path/to/img" />
</a>
</div>最后，通過之前創(chuàng)建的容器初始化lightGallery，腳本如下：
lightGallery(document.getElementById("lightbox-container"), {
speed: 500
// ...
});lightGallery還可與其他JavaScript框架（如React、Angular和Vue）集成，使得通過組件和props來使用庫更加方便容易。
文檔地址：https://www.lightgalleryjs.com/
Github地址：https://github.com/sachinchoolur/lightGallery
