【譯】推薦的十個CSS動畫庫

在這篇文章中，我將向你展現目前爲止，我發現/遇到的十個優秀的CSS動畫庫。

我大約嘗試30種，可是這十種是我找到最好的。

請注意，這些庫不須要引入JavaScript就能夠運行。

再次提醒：整篇文章是經過手機編寫的，因此，若是你在電腦或平板下查看，下面的截圖看起來並不友好。

1.Animista

這個站點是我不久前才發現的，可是我立馬愛上了她。實話說，它值得被提出。

Animasta是一款在線生成器也是一個庫，爲你提供下面的特性：

1.豐富的動畫可供選擇

你能夠選擇你喜歡的動畫類型（好比：進入/退出），此外你也能夠選擇特定的一種（好比：scale-in），甚至，你能夠爲該動畫選擇不一樣的變化（好比：scale-in-right）。

2.定製化

Animista還爲你提供了一項功能，容許你自定義動畫的某部分，好比：

• 持續時間
• 延遲時間
• 或者方向

更好的是，你能夠選擇設置動畫的對象，它有多是：

• 一個簡單的居中方塊
• 一個字符
• 背景
• 甚至一張圖片

3.獲取CSS代碼

選擇適合本身須要的動畫後，你能夠直接從網站種獲取代碼。

你也能夠選擇壓縮版的代碼。

4.下載選擇的動畫

另外一個驚奇的功能是，你能夠將喜歡的動畫的代碼放到你的列表中，並僅下載你喜歡的動畫代碼。或者你能夠將這些動畫代碼複製到一塊兒。

此站點上更好的是，它是響應式的，這意味着你如今就可使用手機瀏覽器它。

2.Animate CSS

固然，我也必須說起Animate CSS，也許這是一個衆所周知的動畫庫。

我將簡單介紹如何使用它。

1.使用

在你須要添加動畫的元素上添加animated類名，而後就是添加動畫的名稱。

好比

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

若是你但願動畫是持久的，你能夠添加infinite類，這樣動畫將不停地重複自身。

• 經過 JavaScript

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

• 經過 Jquery

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

2.額外的特性

Animate CSS爲你提供了一些基本的類去操做動畫的延時和速度。

• 延時

你能夠經過使用delay類來延遲你的動畫。

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

• 速度

你能夠經過添加下表中的類來控制動畫的速度。

Class name	Speed time
slow	2s
slower	3s
fast	800ms
faster	500ms

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

3.Vivify

Vivify是一個動畫庫，我一直覺得它是Animate CSS的加強版。它的使用同樣，有本身更多的類，可是也擴展了些。添加vivify類到元素中，而不是animated。好比：

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

• 使用 Javascript

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

• 使用 Jquery

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

就像Animate CSS同樣，Vivify也爲你提供了一些類來控制動畫的持續時間和延遲時間。

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

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

注意：值的單位是毫秒（ms）。1000ms = 1s

4.Magic Animations CSS3

這個動畫庫有些不錯而且流暢的動畫，我特別喜歡3D動畫。

沒什麼好說的，本身去嘗試下，玩下動畫。

你能夠添加magictime {animation_name}到你的元素中，以下：

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

• 使用 Javascript

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

• 使用 Jquery

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

5.cssanimation.io

cssanimation.io是一大堆不一樣動畫的集合，總共大約有200個，真是太神奇了。

若是在這裏都找不到你想要的動畫，那你在哪都找不到了。

它的使用方式相似animista。好比，你能夠直接選擇動畫，而後直接從網站中獲取，或者下載整個庫。

使用

爲你的元素添加cssanimation {animation_name}。

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

• 使用 Javascript

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

• 使用 Jquery

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

你也能夠添加infinite類，以便動畫不斷重複。

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

此外，cssanimations.io爲你提供了動畫字母的功能。爲了實現這個，你須要在head標籤中引入letteranimation.js文件，而後在你的文本元素中添加le{animation_name}。

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

想要字母動畫有序進行，添加sequence類；想要字母動畫無序進行，添加random類。

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

6.Angrytools

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

它可能不像Animista那麼複雜，可是我發現這個也很棒。這個網站也爲你提供了定製動畫的功能，好比持續時間和延遲時間。

可是我喜歡它的是，你能夠在時間線上添加keyframes（關鍵幀），而且你能夠直接在那裏寫代碼。並且，你也能夠編輯現有的一個效果。

你能夠在完成動效後獲取完成的代碼，或者整個下載它。

7.Hover.css

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

一組CSS3驅動的懸停效果，能夠應用到連接，按鈕，logos，svg，圖片特性和其餘。

它有一些驚人的動效。並且它還有用於動畫圖標的類，好比超棒的字體。

使用

使用很簡單：將類名添加到你的元素中，好比：

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

8.WickedCSS

WickedCSS是一個小型的CSS動畫庫，沒有太多的動畫體，可是它至少有很棒的動畫。它們中大多數是咱們熟悉的基本動畫，可是它們真是很簡潔。

使用方法很簡單，只要爲你的元素添加動畫名就好了。

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

• 使用 Javascript

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

• 使用 Jquery

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

9.Three Dots

Three Dots是CSS加載動畫的集合，僅由三個簡單元素製做而成的三個點建立。

使用

建立一個div元素，而後添加動畫名。

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

10.CSShake

最後，來點搖晃的抖動。

如其名，CSShake包含了不一樣類型的抖動動畫的CSS動畫庫。

• 使用

添加shake {animation_name}到你的元素中。

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

• 使用 Javascript

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

• 使用 Jquery

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

後話

• 原文：dev.to/weeb/10-of-…
• 文章首發：github.com/reng99/blog…
• 更多內容：github.com/reng99/blog…