能解決 80% 需求的 10個 CSS動畫庫

1.Animista

網站地址:http://animista.net/網站描述:在線生成 css 動畫

Animista是一個在線動畫生成器，同時也是一個動畫庫，它為我們提供了以下功能

1. 選擇不同的動畫

我們可以選擇想要的動畫類型（例如entrance/exist），除了可以選擇某個動畫（例如，scale-in）外，甚至還可以為該動畫選擇不同的展示效果（例如：scale-in-right）。

2. 定製

Animista還提供了一個功能，允許我們定製動畫的某些部分，比如

• duration
• delay
• direction

更好的是，可以選擇要設置動畫的對象:

3. 生成CSS代碼

選擇適合自己需要的動畫後，我們可以直接從網站上獲取代碼，甚者可以進行壓縮：

4. 下載代碼

另一個好用的功能是，可以把自己收藏自己喜歡的動畫，然後一起下載下來， 或者，我們也可以選擇將這些動畫的代碼複製到一起。

2. Animate CSS

網站地址:http://daneden.github.io/animate.css

網站描述:齊全的CSS3動畫庫

想必這個不用介紹，大部分人都知道了。Animate CSS 可能是最著名的動畫庫之一。這裡簡要介紹一下它的用法：

1. 用法

首先，必須在總需要動畫元素上添加類animated ，然後是動畫的名字。

<code><divclass>/<code>

如果我們想讓動畫一直持續，可以添加infinite類。

通過 JS 來添加動畫：

<code>document.querySelector('.my-element').classList.add('animated','slideInLeft')/<code>

通過 JQ 來添加動畫：

<code>$(".my-element").addClass("animatedslideInLeft")/<code>

2. 其它功能

Animate CSS提供了一些基本的類來控制動畫的延遲和速度。

** delay **

可以添加 delay 類來延遲動畫的播放。

<code><divclass>
** speed **
 
我們還可以通過添加如下列出的類之一來控制動畫速度。
類名速度時間show2sslower3sfast800msfaster500ms
<code><divclass>
3. Vivify
網站地址: http://vivify.mkcreative.cz/
網站描述: 一個更加豐富css動畫庫
 
Vivify 是一個動畫庫，可以看作是Animate CSS的增強版。它們的工作方式完全相同，有Animate CSS的大多數類且還擴展了一些。
<code><divclass>/<code>
/<divclass>/<code>
使用 JS 方式：
<code>document.querySelector('.my-element').classList.add('vivify','slideInLeft')/<code>
使用 JQ 方式：
<code>$(".my-element").addClass("vivifyslideInLeft")/<code>
與Animate CSS一樣，Vivify 還提供了一些類來控制動畫的持續時間和延遲。
延遲和持續時間類在以下間隔中可用：
<code><divclass>/<code>
/<divclass>/<code>

4. Magic Animations CSS3

網站地址: https://www.minimamente.com/project/magic/

網站描述: Magic CSS3 Animations 是 CSS3 動畫的包，伴有特殊的效果，用戶可以自由的在 web 項目中使用。

這個動畫庫有一些非常漂亮和流暢的動畫，特別是3D的。沒什麼好說的，自己去嘗試。

<code><divclass>/<code>

使用 JS 方式：

<code>document.querySelector('.my-element').classList.add('magictime','fadeIn')/<code>

使用 JQ 方式：

<code>$(".my-element").addClass("magictimefadeIn")/<code>

5. cssanimation.io

網站地址: http://cssanimation.io/index.html

cssanimation.io是一大堆不同動畫的集合，總共大概有200個，這很強大。如果你連在這裡都沒有找到你所需的動畫，那麼在其它也將很難找到。

它的工作原理與 Animista 類似。例如，可以選擇一個動畫並直接從站點獲取代碼，或者也可以下載整個庫。

用法

將cssanimation {animation_name}添加到指定的元素上。

<code><divclass>/<code>

使用 JS

<code>document.querySelector('.my-element').classList.add('cssanimation','fadeIn')/<code>

使用 JQ

<code>$(".my-element").addClass("cssanimationfadeIn")/<code>

還可以添加 infinite 類，這樣動畫就可以循環播放。

<code><divclass>/<code>

此外，cssanimation.io還為我們提供了動漫字母的功能。使用這個需要引入letteranimation.js文件，然後將le {animation_name}添加到我們的文本元素中。

<code><divclass>/<code>

要使字母按順序產生動畫，添加sequence類，要使它們隨機產生動畫，添加random類。

<code><divclass>/<code>

Sequence

Random

6.Angrytools

網站地址: https://angrytools.com/css/animation/

如果使用不同的生成器，Angrytools實際上是一個集合，其中還包括CSS動畫生成器。

它可能不像Animista那麼複雜，但我覺得這個也很不錯。這個站點還提供了一些自定義動畫的特性，比如動畫的持續時間或延遲。

但是我喜歡的是，我們可以在其展示時間軸上添加自定義的keyframes，然後可以直接在其中編寫代碼。另外，也可以編輯現有的。

當我們完成的時候，可以得到完整的動畫代碼，也可以下載它。

7.Hover.css

網站地址: http://ianlunn.github.io/Hover/網站描述: 純CSS3鼠標滑過效果動畫庫

Hover.css是許多CSS動畫的集合，與上面的動畫不同，每次將元素懸停時都會觸發。

一組CSS3支持的懸停效果，可應用於鏈接、按鈕、徽標、SVG和特色圖像等。

** 用法

它非常簡單:只需將類的名稱添加到元素中，比如

<code><buttonclass>Hoverme!/<buttonclass>/<code>

8.WickedCSS

網站地址: http://kristofferandreasen.github.io/wickedCSS/#

WickedCSS是一個小的CSS動畫庫，它沒有太多的動畫變體，但至少有很大的變化。其中大多數是我們已經熟悉的基礎知識，但它們確實很乾淨。

它的用法很簡單，只需將動畫的名稱添加到元素中即可。

<code><divclass>/<code>

** 使用 JS

<code>document.querySelector('.my-element').classList.add('bounceIn')/<code>

** 使用 JQ

<code>$(".my-element").addClass("bounceIn")/<code>

9.Three Dots

網站地址:

Three Dots是一組CSS加載動畫，它由三個點組成，而這些點僅由單個元素組成。

** 用法

只需創建一個div元素，並添加動畫的名稱

<code><divclass>/<code>

10.CSShake

網站地址: http://kristofferandreasen.github.io/wickedCSS/#

顧名思義，CSShake是一個CSS動畫庫，其中包含不同類型的震動動畫。

** 用法

將shake {animation name}添加到元素中。

<code><divclass>/<code>

** 使用 JS **

<code>document.querySelector('.my-element').classList.add('shake','shake-hard')/<code>

** 使用 JQ **

<code>$(".my-element").addClass("shakeshake-hard")/<code>

原文：https://dev.to/weeb/10-of-the-best-css-animation-libraries-31d7

閱讀更多 前端小智 的文章

關鍵字: 地址 動畫 類名