在過(guò)去的很多年時(shí)間里，開(kāi)發(fā)人員想要在網(wǎng)頁(yè)上顯示動(dòng)畫(huà)，只能借助于Flash播放器和GIF圖片。

創(chuàng)新互聯(lián)建站總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、小程序制作、軟件開(kāi)發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動(dòng)行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力！

然而，隨著CSS3引入關(guān)鍵幀、過(guò)渡和動(dòng)畫(huà)屬性，創(chuàng)建燃爆人眼球的抽象動(dòng)畫(huà)變得容易起來(lái)。CSS3更新不但允許創(chuàng)建動(dòng)畫(huà)，甚至可以呈現(xiàn)各種偽狀態(tài)（即懸停、聚焦等）。這些都是劃時(shí)代的進(jìn)步。

使用這些屬性創(chuàng)建動(dòng)畫(huà)非常簡(jiǎn)單。首先，定義包含選擇動(dòng)畫(huà)序列的keyframes規(guī)則：

@keyframes float {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

我們?cè)谏厦娑x了一個(gè)命名為float的關(guān)鍵幀，該關(guān)鍵幀在動(dòng)畫(huà)流的0%處將元素translate屬性設(shè)置為平移0%，50%處沿y軸向上平移15px，100%處平移回0%。

然后，我們可以通過(guò)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)建簡(jiǎn)單的浮動(dòng)動(dòng)畫(huà)就需要大量代碼，要是處理更復(fù)雜的動(dòng)畫(huà)，代碼就更長(zhǎng)了。動(dòng)畫(huà)庫(kù)本質(zhì)上解決了這個(gè)問(wèn)題，有了動(dòng)畫(huà)庫(kù)，我們向網(wǎng)頁(yè)添加動(dòng)畫(huà)的過(guò)程如同向元素添加類名一樣簡(jiǎn)單。

這篇文章將介紹用于各種動(dòng)畫(huà)類型，例如簡(jiǎn)單運(yùn)動(dòng)、元素/頁(yè)面過(guò)渡、燈箱動(dòng)畫(huà)、加載器、滾動(dòng)時(shí)動(dòng)畫(huà)頁(yè)面等等的10個(gè)常見(jiàn)的CSS動(dòng)畫(huà)庫(kù)和平臺(tái)。一起來(lái)看看吧。

Animate.css

圖片

Animate.css是最受歡迎的CSS動(dòng)畫(huà)庫(kù)之一，截至撰寫(xiě)本文為止，GitHub上的星星超過(guò)76k。只需在想要設(shè)置動(dòng)畫(huà)的元素中包含類名，我們就可以通過(guò)Animate.css毫不費(fèi)力地將多個(gè)動(dòng)畫(huà)范圍添加到web應(yīng)用程序中。對(duì)于顯示頁(yè)面動(dòng)畫(huà)、滑塊動(dòng)畫(huà)以及整體引人注目的動(dòng)畫(huà)，使用Animate.css非常方便。

這個(gè)庫(kù)包括的實(shí)用程序類還允許你直接從標(biāo)記調(diào)整動(dòng)畫(huà)持續(xù)時(shí)間、速度和重復(fù)動(dòng)畫(huà)。你還可以將此庫(kù)提供的動(dòng)畫(huà)與本地CSS關(guān)鍵幀屬性集成，并直接從CSS代碼進(jìn)行調(diào)用。

如何使用

Animate.css可作為npm包提供，也可通過(guò)CDN使用：

在標(biāo)記頭部分包含CDN URL后，你可以從可用動(dòng)畫(huà)列表中調(diào)用，如下所示：

A pulse animated element

A pulse animated element

在第一個(gè)示例中，我們創(chuàng)建了一個(gè)脈沖動(dòng)畫(huà)的div，默認(rèn)情況下動(dòng)畫(huà)1秒鐘，在第二個(gè)示例中，我們將脈沖動(dòng)畫(huà)配置為使用animate__infinite實(shí)用程序類（相當(dāng)于CSSanimation-iteration-count: infinite;）。

文檔地址：https://animate.style/

Github地址：https://github.com/animate-css/animate.css

Animista

Animista與其說(shuō)是一個(gè)庫(kù)，不如說(shuō)是一個(gè)CSS動(dòng)畫(huà)平臺(tái)，因?yàn)樗葱杼峁﹦?dòng)畫(huà)，即你在平臺(tái)可以選擇想要的動(dòng)畫(huà)類型，然后為你生成動(dòng)畫(huà)CSS關(guān)鍵幀代碼。

圖片

從表面上看，Animista上可用的動(dòng)畫(huà)類型與animate.css上提供的動(dòng)畫(huà)類型非常相似，但是，如果深入研究，你會(huì)發(fā)現(xiàn)Animista提供了更多有用的動(dòng)畫(huà)類別，特別是在動(dòng)畫(huà)文字和背景元素方面。而且，在你準(zhǔn)備導(dǎo)出動(dòng)畫(huà)代碼時(shí)，還可以選擇標(biāo)準(zhǔn)下載或壓縮代碼。

如何使用

無(wú)需下載任何軟件包，也無(wú)需在網(wǎng)站中包含任何CDN鏈接，即可使用Animista：只需訪問(wèn)主頁(yè)，選擇喜歡的動(dòng)畫(huà)，根據(jù)需要自定義動(dòng)畫(huà)序列，就會(huì)立即產(chǎn)生代碼。

整個(gè)過(guò)程如下所示：

圖片

文檔地址：https://docs.google.com/document/d/1jktijADrL3dmwF_td73HJrAD7-x_MY3i6VMtvqKwa1o/edit#

官方地址：https://animista.net/

Animation library

圖片

你可以把Animation library當(dāng)作是Animate.css的替代方案，因?yàn)樗鼈兲峁╊愃频膭?dòng)畫(huà)類別。但是，與Animate.css不同點(diǎn)在于，Animation library不提供允許設(shè)置選擇動(dòng)畫(huà)持續(xù)時(shí)間、速度和計(jì)時(shí)的其他自定義選項(xiàng)。

此外，Animation library源文件被劃分為不同的類 — 例如，淡入淡出動(dòng)畫(huà)的所有變體都位于單個(gè)源文件中，其他動(dòng)畫(huà)類也是如此。

如何使用

下載包含所有動(dòng)畫(huà)類別的ZIP文件后，選擇鏈接到其中的文件，并在標(biāo)記中調(diào)用關(guān)聯(lián)的類名。下面是鏈接rotate.css并使用rotateUpRight樣式的一個(gè)示例：

  



  

    This div will rotate up right.
  

文檔地址：https://animation.kaustubhmenon.com/

Github地址：https://github.com/kaustubhmenon/animation-library

Magic CSS

圖片

Magic CSS也是一個(gè)很有趣的動(dòng)畫(huà)庫(kù)，與之前介紹的動(dòng)畫(huà)庫(kù)相比，它提供的的動(dòng)畫(huà)更具吸引力。軟件包提供的動(dòng)畫(huà)對(duì)于頁(yè)面過(guò)渡非常方便。但是，magic CSS的一個(gè)缺點(diǎn)是它不支持Opera迷你瀏覽器。

如何使用

Magic CSS的用法非常簡(jiǎn)單。既可以通過(guò)npm下載庫(kù)，也可以直接下載CSS源文件，并寫(xiě)到網(wǎng)頁(yè)標(biāo)記中，然后調(diào)用即可：

文檔地址：https://www.minimamente.com/project/magic/

Github地址：https://github.com/miniMAC/magic

lightGallery

圖片

lightGallery與我們之前提到的其他動(dòng)畫(huà)庫(kù)不同，它是專門為制作焦點(diǎn)圖動(dòng)畫(huà)而設(shè)計(jì)的。焦點(diǎn)圖動(dòng)畫(huà)（如上圖所示）是單擊時(shí)以模態(tài)形式覆蓋當(dāng)前網(wǎng)站的圖像。

lightGallery是一個(gè)多功能庫(kù)，因?yàn)樗С忠曨l文件，允許你以輪播格式渲染媒體資源，允許你創(chuàng)建自定義插件來(lái)擴(kuò)展或修改功能。同樣值得注意的是，lightGallery并不完全是一個(gè)純粹的CSS動(dòng)畫(huà)庫(kù)，它的功能依賴于JavaScript。

如何使用

lightGallery可通過(guò)npm/yarn、bower獲得，也可通過(guò)CDN提供服務(wù)。要使用傳統(tǒng)網(wǎng)頁(yè)，首先在網(wǎng)頁(yè)中包含CSS和JavaScript CDN鏈接，如下所示：

然后，創(chuàng)建元素，該元素將充當(dāng)要轉(zhuǎn)換為焦點(diǎn)圖的所有圖像的容器：

最后，通過(guò)之前創(chuàng)建的容器初始化lightGallery，腳本如下：

lightGallery(document.getElementById("lightbox-container"), {
  speed: 500
  //   ...
});

lightGallery還可與其他JavaScript框架（如React、Angular和Vue）集成，使得通過(guò)組件和props來(lái)使用庫(kù)更加方便容易。

文檔地址：https://www.lightgalleryjs.com/

Github地址：https://github.com/sachinchoolur/lightGallery

網(wǎng)站名稱：十個(gè)好用的CSS動(dòng)畫(huà)庫(kù)，你知道幾個(gè)？
網(wǎng)址分享：http://uogjgqi.cn/article/dpgpgdj.html