本文格式為Word版，下載可任意編輯——10個(gè)值得前端收藏的CSS3動(dòng)效庫(kù)10個(gè)值得前端珍藏的CSS3動(dòng)效庫(kù)

現(xiàn)在的網(wǎng)站和App的設(shè)計(jì)中越來(lái)越重視用戶體驗(yàn)，而優(yōu)秀的動(dòng)效那么能使你的應(yīng)用更具交互性，從而吸引更多用戶的使用。下面將為大家?guī)?lái)10個(gè)值得前端珍藏的CSS3動(dòng)效庫(kù)，接待閱讀!

10個(gè)值得前端珍藏的CSS3動(dòng)效庫(kù)

1.Animate.css

Animate.css是我對(duì)比熱愛(ài)的一個(gè)CSS3動(dòng)效庫(kù)，分外適合那些對(duì)CSS3動(dòng)畫(huà)效果不熟諳，但又夢(mèng)想給自己所做的網(wǎng)站或基于H5的APP引入動(dòng)效的摯友。由于，你只需要給需要實(shí)現(xiàn)動(dòng)效的元素添加上Animate.css中預(yù)定義的那些動(dòng)效名稱就可以了。譬如常見(jiàn)的：bounce，flash，fadeIn，fadeOut等等，加起來(lái)有75種不同的動(dòng)效，完全能夠得志你的根本需要了。

當(dāng)然對(duì)于這個(gè)庫(kù)也有一些使用留神事項(xiàng)，譬如你最好在給元素添加動(dòng)效樣式完成動(dòng)效后，連忙將這個(gè)動(dòng)效樣式去掉。另外，對(duì)于動(dòng)效的時(shí)長(zhǎng)，振動(dòng)幅度等，你也需要做一些調(diào)整。由于，我感覺(jué)它默認(rèn)設(shè)置中的動(dòng)效過(guò)于快速和猛烈了。Animate.css已經(jīng)供給了細(xì)致的文檔報(bào)告你理應(yīng)如何做這些調(diào)整。

2.Bounce.js

Bounce.js是一個(gè)能夠生成CSS3動(dòng)效的小工具，它是用JavaScript編寫(xiě)的，供給了一個(gè)Web界面，你可以添加一個(gè)組件然后就可以選擇包括Scale，Translate，Rotate，Skew這些動(dòng)效類型，然后分別設(shè)置它們的參數(shù)，當(dāng)達(dá)成你想要的效果后，你可以將這個(gè)動(dòng)效以CSS的方式導(dǎo)出，這樣你就可以將它應(yīng)用到你的應(yīng)用中了。

3.CSS3Animation

CSS3Animation是一個(gè)分外簡(jiǎn)樸易用的動(dòng)效工具，你可以在它供給的簡(jiǎn)樸圖形界面里，通過(guò)拖拽一些進(jìn)度條來(lái)操縱你的動(dòng)效，生成的CSS代碼會(huì)自動(dòng)顯示在下面的'一個(gè)文本框里，你可以拷貝粘貼到你的應(yīng)用中直接使用。

4.CSSAnimate

假設(shè)你覺(jué)得上面的工具還無(wú)法做出你想要的動(dòng)效，那么可以看看CSSAnimate這個(gè)工具。它能讓你設(shè)置更多的動(dòng)效參數(shù)，譬如你可以同時(shí)設(shè)置動(dòng)效起始和終止?fàn)顟B(tài)的坐標(biāo)，大小，以及通明度，這樣你就能夠做出更加繁雜的動(dòng)效來(lái)。

5.MagicAnimations

MagicAnimations與Animate.css特別類似，也是一個(gè)預(yù)定義了一系列動(dòng)效的CSS庫(kù)。但與Animate.css的最大識(shí)別可能是，它定義的那些動(dòng)效更炫也更酷一些，假設(shè)你的網(wǎng)站也很新潮，那可以考慮使用這個(gè)CSS動(dòng)效庫(kù)。

6.AniJS

AniJS是一個(gè)通過(guò)JavaScript操縱的動(dòng)效庫(kù)。它允許你通過(guò)它的鏈?zhǔn)秸Z(yǔ)法來(lái)定義動(dòng)效。譬如下面這個(gè)例子：當(dāng)用戶點(diǎn)擊時(shí)這個(gè)元素會(huì)沿Y軸翻轉(zhuǎn)。

7.SingleElementCSSSpinners

我們經(jīng)常會(huì)需要一些動(dòng)效來(lái)表達(dá)系統(tǒng)處于加載或處理數(shù)據(jù)的過(guò)程中。SingleElementCSSSpinners這個(gè)在GitHub上的工程，供給了一組分外美麗的可用于加載的CSS3動(dòng)效。

8.Snabbt.js

Sanbbt.js是我很熱愛(ài)的一個(gè)動(dòng)效庫(kù)，它分外小巧只有5K，所以可以被用在移動(dòng)應(yīng)用中。而且它也支持鏈?zhǔn)秸Z(yǔ)法，你可以很便當(dāng)?shù)貙?xiě)出繁雜的動(dòng)效組合。

snabbtelement,

position:[200,0,0],

easing:functionvalue

returnvalue+0.3*Math.sin2*Math.PI*value;

.snabbt

position:[0,0,0],

easing:easeOut

;

9.Odometer

Odometer是用來(lái)給數(shù)字作動(dòng)效的，譬如通過(guò)它你可以很好地呈現(xiàn)網(wǎng)站人數(shù)的增加，倒計(jì)時(shí)等與數(shù)字相關(guān)的動(dòng)畫(huà)效果。

10.Hover