在這篇文章中，我将向你展示目前為止，我發現/遇到的十個優秀的
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
最後，來點搖晃的抖動。
- 使用
<div class="shake shake-hard"></div> - 使用 Javascript
document.querySelector('.my-element').classList.add('shake','shake-hard') - 使用 Jquery
$(".my-element").addClass("shake shake-hard")