2020-7-6 seo達人
目錄
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 動畫
Animista是一個在線動畫生成器，同時也是一個動畫庫，它為我們提供了以下功能
1. 選擇不同的動畫
我們可以選擇想要的動畫類型（例如entrance/exist），除了可以選擇某個動畫（例如，scale-in）外，甚至還可以為該動畫選擇不同的展示效果（例如： scale-in-right）。
2. 定制
Animista還提供了一個功能，允許我們定制動畫的某些部分，比如
duration
delay
direction
更好的是，可以選擇要設(shè)置動畫的對象:
3. 生成CSS代碼
選擇適合自己需要的動畫后，我們可以直接從網(wǎng)站上獲取代碼，甚者可以進行壓縮：
4. 下載代碼
另一個好用的功能是，可以把自己收藏自己喜歡的動畫，然后一起下載下來， 或者，我們也可以選擇將這些動畫的代碼復(fù)制到一起。
2. Animate CSS
網(wǎng)站地址:http://daneden.github.io/anim...
網(wǎng)站描述:齊全的CSS3動畫庫
想必這個不用介紹，大部分人都知道了。Animate CSS 可能是最著名的動畫庫之一。這里簡要介紹一下它的用法：
1. 用法
首先，必須在總需要動畫元素上添加類animated ，然后是動畫的名字。
<div class="animated slideInLeft"></div>
如果我們想讓動畫一直持續(xù)，可以添加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
網(wǎng)站地址: http://vivify.mkcreative.cz/
網(wǎng)站描述: 一個更加豐富css動畫庫
Vivify 是一個動畫庫，可以看作是Animate CSS的增強版。它們的工作方式完全相同，有Animate CSS的大多數(shù)類且還擴展了一些。
<div class="vivify slideInLeft"></div>
使用 JS 方式：
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
使用 JQ 方式：
$(".my-element").addClass("vivify slideInLeft")
與Animate CSS一樣，Vivify 還提供了一些類來控制動畫的持續(xù)時間和延遲。
延遲和持續(xù)時間類在以下間隔中可用：
<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 動畫的包，伴有特殊的效果，用戶可以自由的在 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
網(wǎng)站地址: http://cssanimation.io/index....
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 類，這樣動畫就可以循環(huán)播放。
<div class="cssanimation fadeIn infinite"></div>
此外，cssanimation.io還為我們提供了動漫字母的功能。使用這個需要引入letteranimation.js文件，然后將le {animation_name}添加到我們的文本元素中。
<div class="cssanimation leSnake"></div>
要使字母按順序產(chǎn)生動畫，添加sequence類，要使它們隨機產(chǎn)生動畫，添加random類。
<div class="cssanimation leSnake {sequence|random}"></div>
Sequence
Random
6.Angrytools
網(wǎng)站地址: https://angrytools.com/css/an...
如果使用不同的生成器，Angrytools實際上是一個集合，其中還包括CSS動畫生成器。
它可能不像Animista那么復(fù)雜，但我覺得這個也很不錯。這個站點還提供了一些自定義動畫的特性，比如動畫的持續(xù)時間或延遲。
但是我喜歡的是，我們可以在其展示時間軸上添加自定義的keyframes，然后可以直接在其中編寫代碼。 另外，也可以編輯現(xiàn)有的。
當(dāng)我們完成的時候，可以得到完整的動畫代碼，也可以下載它。
7.Hover.css
網(wǎng)站地址: http://ianlunn.github.io/Hover/
網(wǎng)站描述: 純CSS3鼠標(biāo)滑過效果動畫庫
Hover.css是許多CSS動畫的集合，與上面的動畫不同，每次將元素懸停時都會觸發(fā)。
一組CSS3支持的懸停效果，可應(yīng)用于鏈接、按鈕、徽標(biāo)、SVG和特色圖像等。
** 用法
它非常簡單:只需將類的名稱添加到元素中，比如
<button class="hvr-fade">Hover me!</button>
8.WickedCSS
網(wǎng)站地址: http://kristofferandreasen.gi...
WickedCSS是一個小的CSS動畫庫，它沒有太多的動畫變體，但至少有很大的變化。 其中大多數(shù)是我們已經(jīng)熟悉的基礎(chǔ)知識，但它們確實很干凈。
它的用法很簡單，只需將動畫的名稱添加到元素中即可。
<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加載動畫，它由三個點組成，而這些點僅由單個元素組成。
** 用法
只需創(chuàng)建一個div元素，并添加動畫的名稱
<div class="dot-elastic"></div>
10.CSShake
網(wǎng)站地址: https://elrumordelaluz.github...
顧名思義，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，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
原文：https://dev.to/weeb/10-of-the...
交流
藍藍設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.lzhte.cn