目錄

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

網(wǎng)站地址:http://animista.net/

網(wǎng)站描述:在線生成 css 動(dòng)畫(huà)

Animista是一個(gè)在線動(dòng)畫(huà)生成器，同時(shí)也是一個(gè)動(dòng)畫(huà)庫(kù)，它為我們提供了以下功能

1. 選擇不同的動(dòng)畫(huà)

我們可以選擇想要的動(dòng)畫(huà)類(lèi)型（例如entrance/exist），除了可以選擇某個(gè)動(dòng)畫(huà)（例如，scale-in）外，甚至還可以為該動(dòng)畫(huà)選擇不同的展示效果（例如： scale-in-right）。

2. 定制

Animista還提供了一個(gè)功能，允許我們定制動(dòng)畫(huà)的某些部分，比如

duration

delay

direction

更好的是，可以選擇要設(shè)置動(dòng)畫(huà)的對(duì)象:

3. 生成CSS代碼

選擇適合自己需要的動(dòng)畫(huà)后，我們可以直接從網(wǎng)站上獲取代碼，甚者可以進(jìn)行壓縮：

4. 下載代碼

另一個(gè)好用的功能是，可以把自己收藏自己喜歡的動(dòng)畫(huà)，然后一起下載下來(lái)， 或者，我們也可以選擇將這些動(dòng)畫(huà)的代碼復(fù)制到一起。

2. Animate CSS

網(wǎng)站地址:http://daneden.github.io/anim...

網(wǎng)站描述:齊全的CSS3動(dòng)畫(huà)庫(kù)

想必這個(gè)不用介紹，大部分人都知道了。Animate CSS 可能是最著名的動(dòng)畫(huà)庫(kù)之一。這里簡(jiǎn)要介紹一下它的用法：

1. 用法

首先，必須在總需要?jiǎng)赢?huà)元素上添加類(lèi)animated ，然后是動(dòng)畫(huà)的名字。

<div class="animated slideInLeft"></div>

如果我們想讓動(dòng)畫(huà)一直持續(xù)，可以添加infinite類(lèi)。

通過(guò) JS 來(lái)添加動(dòng)畫(huà)：

document.querySelector('.my-element').classList.add('animated', 'slideInLeft')

通過(guò) JQ 來(lái)添加動(dòng)畫(huà)：

$(".my-element").addClass("animated slideInLeft")

2. 其它功能

Animate CSS提供了一些基本的類(lèi)來(lái)控制動(dòng)畫(huà)的延遲和速度。

delay

可以添加 delay 類(lèi)來(lái)延遲動(dòng)畫(huà)的播放。

<div class="animated slideInLeft delay-{1-5}"><div>

speed

我們還可以通過(guò)添加如下列出的類(lèi)之一來(lái)控制動(dòng)畫(huà)速度。

類(lèi)名 速度時(shí)間

show 2s

slower 3s

fast 800ms

faster 500ms

<div class="animated slideInLeft slow|slower|fast|faster"><div>

3. Vivify

網(wǎng)站地址: http://vivify.mkcreative.cz/

網(wǎng)站描述: 一個(gè)更加豐富css動(dòng)畫(huà)庫(kù)

Vivify 是一個(gè)動(dòng)畫(huà)庫(kù)，可以看作是Animate CSS的增強(qiáng)版。它們的工作方式完全相同，有Animate CSS的大多數(shù)類(lèi)且還擴(kuò)展了一些。

<div class="vivify slideInLeft"></div>

使用 JS 方式：

document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')

使用 JQ 方式：

$(".my-element").addClass("vivify slideInLeft")

與Animate CSS一樣，Vivify 還提供了一些類(lèi)來(lái)控制動(dòng)畫(huà)的持續(xù)時(shí)間和延遲。

延遲和持續(xù)時(shí)間類(lèi)在以下間隔中可用：

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

4. Magic Animations CSS3

網(wǎng)站地址: https://www.minimamente.com/p...

網(wǎng)站描述: Magic CSS3 Animations 是 CSS3 動(dòng)畫(huà)的包，伴有特殊的效果，用戶可以自由的在 web 項(xiàng)目中使用。

這個(gè)動(dòng)畫(huà)庫(kù)有一些非常漂亮和流暢的動(dòng)畫(huà)，特別是3D的。沒(méi)什么好說(shuō)的，自己去嘗試。

<div class="magictime fadeIn"></div>

使用 JS 方式：

document.querySelector('.my-element').classList.add('magictime', 'fadeIn')

使用 JQ 方式：

$(".my-element").addClass("magictime fadeIn")

5. cssanimation.io

網(wǎng)站地址: http://cssanimation.io/index....

cssanimation.io是一大堆不同動(dòng)畫(huà)的集合，總共大概有200個(gè)，這很強(qiáng)大。如果你連在這里都沒(méi)有找到你所需的動(dòng)畫(huà)，那么在其它也將很難找到。

它的工作原理與 Animista 類(lèi)似。例如，可以選擇一個(gè)動(dòng)畫(huà)并直接從站點(diǎn)獲取代碼，或者也可以下載整個(gè)庫(kù)。

用法

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

<div class="cssanimation fadeIn"></div>

使用 JS

document.querySelector('.my-element').classList.add('cssanimation','fadeIn')

使用 JQ

$(".my-element").addClass("cssanimation fadeIn")

還可以添加 infinite 類(lèi)，這樣動(dòng)畫(huà)就可以循環(huán)播放。

<div class="cssanimation fadeIn infinite"></div>

   

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

<div class="cssanimation leSnake"></div>

要使字母按順序產(chǎn)生動(dòng)畫(huà)，添加sequence類(lèi)，要使它們隨機(jī)產(chǎn)生動(dòng)畫(huà)，添加random類(lèi)。

<div class="cssanimation leSnake {sequence|random}"></div>

Sequence

Random

6.Angrytools

網(wǎng)站地址: https://angrytools.com/css/an...

如果使用不同的生成器，Angrytools實(shí)際上是一個(gè)集合，其中還包括CSS動(dòng)畫(huà)生成器。

它可能不像Animista那么復(fù)雜，但我覺(jué)得這個(gè)也很不錯(cuò)。這個(gè)站點(diǎn)還提供了一些自定義動(dòng)畫(huà)的特性，比如動(dòng)畫(huà)的持續(xù)時(shí)間或延遲。

但是我喜歡的是，我們可以在其展示時(shí)間軸上添加自定義的keyframes，然后可以直接在其中編寫(xiě)代碼。 另外，也可以編輯現(xiàn)有的。

當(dāng)我們完成的時(shí)候，可以得到完整的動(dòng)畫(huà)代碼，也可以下載它。

7.Hover.css

網(wǎng)站地址: http://ianlunn.github.io/Hover/

網(wǎng)站描述: 純CSS3鼠標(biāo)滑過(guò)效果動(dòng)畫(huà)庫(kù)

Hover.css是許多CSS動(dòng)畫(huà)的集合，與上面的動(dòng)畫(huà)不同，每次將元素懸停時(shí)都會(huì)觸發(fā)。

一組CSS3支持的懸停效果，可應(yīng)用于鏈接、按鈕、徽標(biāo)、SVG和特色圖像等。

** 用法

它非常簡(jiǎn)單:只需將類(lèi)的名稱(chēng)添加到元素中，比如

<button class="hvr-fade">Hover me!</button>

8.WickedCSS

網(wǎng)站地址: http://kristofferandreasen.gi...

WickedCSS是一個(gè)小的CSS動(dòng)畫(huà)庫(kù)，它沒(méi)有太多的動(dòng)畫(huà)變體，但至少有很大的變化。 其中大多數(shù)是我們已經(jīng)熟悉的基礎(chǔ)知識(shí)，但它們確實(shí)很干凈。

它的用法很簡(jiǎn)單，只需將動(dòng)畫(huà)的名稱(chēng)添加到元素中即可。

<div class="bounceIn"></div>

** 使用 JS

document.querySelector('.my-element').classList.add('bounceIn')

** 使用 JQ

$(".my-element").addClass("bounceIn")

9.Three Dots

網(wǎng)站地址: https://nzbin.github.io/three...

Three Dots是一組CSS加載動(dòng)畫(huà)，它由三個(gè)點(diǎn)組成，而這些點(diǎn)僅由單個(gè)元素組成。

** 用法

只需創(chuàng)建一個(gè)div元素，并添加動(dòng)畫(huà)的名稱(chēng)

<div class="dot-elastic"></div>

10.CSShake

網(wǎng)站地址: https://elrumordelaluz.github...

顧名思義，CSShake是一個(gè)CSS動(dòng)畫(huà)庫(kù)，其中包含不同類(lèi)型的震動(dòng)動(dòng)畫(huà)。

** 用法

將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")

人才們的 【三連】 就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

原文：https://dev.to/weeb/10-of-the...

交流

藍(lán)藍(lán)設(shè)計(jì)( m.wtxcl.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)