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

做者：Patrik Kiss

譯者：前端小智

來源：dev

---

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

目錄

1. Animista 2. Animate CSS 3. Vivify 4. Magic Animations CSS3 5. cssanimation.io 6. Angrytools 7. Hover.css 8. WickedCSS 9. Three Dots 10. CSShake

1.Animista

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

Animista是一個在線動畫生成器，同時也是一個動畫庫，它爲咱們提供瞭如下功能

1. 選擇不一樣的動畫

咱們能夠選擇想要的動畫類型（例如entrance/exist），除了能夠選擇某個動畫（例如，scale-in）外，甚至還能夠爲該動畫選擇不一樣的展現效果（例如： scale-in-right）。

2. 定製

Animista還提供了一個功能，容許咱們定製動畫的某些部分，好比

• duration
• delay
• direction

更好的是，能夠選擇要設置動畫的對象:

3. 生成CSS代碼

選擇適合本身須要的動畫後，咱們能夠直接從網站上獲取代碼，甚者能夠進行壓縮：

4. 下載代碼

另外一個好用的功能是，能夠把本身收藏本身喜歡的動畫，而後一塊兒下載下來， 或者，咱們也能夠選擇將這些動畫的代碼複製到一塊兒。

2. Animate CSS

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

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

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

1. 用法

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

<div class="animated slideInLeft"></div>
複製代碼

若是咱們想讓動畫一直持續，能夠添加infinite類。

經過 JS 來添加動畫：

document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
複製代碼

經過 JQ 來添加動畫：

$(".my-element").addClass("animated slideInLeft")
複製代碼

2. 其它功能

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

** delay **

能夠添加 delay 類來延遲動畫的播放。

<div class="animated slideInLeft delay-{1-5}"><div>
複製代碼

** speed **

咱們還能夠經過添加以下列出的類之一來控制動畫速度。

類名	速度時間
show	2s
slower	3s
fast	800ms
faster	500ms

<div class="animated slideInLeft slow|slower|fast|faster"><div>
複製代碼

3. Vivify

網站地址: vivify.mkcreative.cz/

網站描述: 一個更加豐富css動畫庫

Vivify 是一個動畫庫，能夠看做是Animate CSS的加強版。它們的工做方式徹底相同，有Animate CSS的大多數類且還擴展了一些。

<div class="vivify slideInLeft"></div>
複製代碼

使用 JS 方式：

document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
複製代碼

使用 JQ 方式：

$(".my-element").addClass("vivify slideInLeft")
複製代碼

與Animate CSS同樣，Vivify 還提供了一些類來控制動畫的持續時間和延遲。

延遲和持續時間類在如下間隔中可用：

<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
複製代碼

4. Magic Animations CSS3

網站地址: www.minimamente.com/project/mag…

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

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

<div class="magictime fadeIn"></div>
複製代碼

使用 JS 方式：

document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
複製代碼

使用 JQ 方式：

$(".my-element").addClass("magictime fadeIn")
複製代碼

5. cssanimation.io

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

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

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

用法

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

<div class="cssanimation fadeIn"></div>
複製代碼

使用 JS

document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
複製代碼

使用 JQ

$(".my-element").addClass("cssanimation fadeIn")
複製代碼

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

<div class="cssanimation fadeIn infinite"></div>
複製代碼

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

<div class="cssanimation leSnake"></div>
複製代碼

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

<div class="cssanimation leSnake {sequence|random}"></div>
複製代碼

Sequence

Random

6.Angrytools

網站地址: angrytools.com/css/animati…

若是使用不一樣的生成器，Angrytools其實是一個集合，其中還包括CSS動畫生成器。

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

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

當咱們完成的時候，能夠獲得完整的動畫代碼，也能夠下載它。

7.Hover.css

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

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

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

** 用法

它很是簡單:只需將類的名稱添加到元素中，好比

<button class="hvr-fade">Hover me!</button>
複製代碼

8.WickedCSS

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

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

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

<div class="bounceIn"></div>
複製代碼

** 使用 JS

document.querySelector('.my-element').classList.add('bounceIn')
複製代碼

** 使用 JQ

$(".my-element").addClass("bounceIn")
複製代碼

9.Three Dots

網站地址: nzbin.github.io/three-dots/…

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

** 用法

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

<div class="dot-elastic"></div>
複製代碼

10.CSShake

網站地址: elrumordelaluz.github.io/csshake/

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

** 用法

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

<div class="shake shake-hard"></div>
複製代碼

** 使用 JS **

document.querySelector('.my-element').classList.add('shake','shake-hard')
複製代碼

** 使用 JQ **

$(".my-element").addClass("shake shake-hard")
複製代碼

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：dev.to/weeb/10-of-…

---

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。