現(xiàn)在的網(wǎng)站和App的設(shè)計(jì)中越來(lái)越重視用戶體驗(yàn)，而優(yōu)秀的動(dòng)效則能使你的應(yīng)用更具交互性乘综，從而吸引更多用戶的使用么伯。我一般會(huì)在網(wǎng)站中加入一些簡(jiǎn)單而一致的動(dòng)效叶撒，我所用的技術(shù)則是用SASS+bourbon來(lái)生成出那些基于CSS3的動(dòng)畫效果來(lái)张峰。但如果你對(duì)CSS3中定義動(dòng)效還不熟練泪蔫，或希望采用更加簡(jiǎn)單直接的方式在你的應(yīng)用中引入動(dòng)效的話，你可以參考并使用下面的這10個(gè)優(yōu)秀動(dòng)效庫(kù)（工具）喘批。
1. Animate.css
Animate.css是我比較喜歡的一個(gè)CSS3動(dòng)效庫(kù)，非常適合那些對(duì)CSS3動(dòng)畫效果不熟悉铣揉，但又希望給自己所做的網(wǎng)站或基于H5的APP引入動(dòng)效的朋友饶深。因?yàn)椋阒恍枰o需要實(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)整活合。因?yàn)槌簦腋杏X(jué)它默認(rèn)設(shè)置中的動(dòng)效過(guò)于快速和強(qiáng)烈了。Animate.css已經(jīng)提供了詳細(xì)的文檔告訴你應(yīng)該如何做這些調(diào)整白指。
2. Bounce.js
Bounce.js是一個(gè)能夠生成CSS3動(dòng)效的小工具留晚，它是用JavaScript編寫的，提供了一個(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. CSS3 Animation
CSS3 Animation是一個(gè)非常簡(jiǎn)單易用的動(dòng)效工具缸血，你可以在它提供的簡(jiǎn)單圖形界面里蜜氨，通過(guò)拖拽一些進(jìn)度條來(lái)控制你的動(dòng)效，生成的CSS代碼會(huì)自動(dòng)顯示在下面的一個(gè)文本框里捎泻，你可以拷貝粘貼到你的應(yīng)用中直接使用飒炎。
4. CSS Animate
如果你覺(jué)得上面的工具還無(wú)法做出你想要的動(dòng)效，那么可以看看CSS Animate這個(gè)工具笆豁。它能讓你設(shè)置更多的動(dòng)效參數(shù)郎汪，比如你可以同時(shí)設(shè)置動(dòng)效起始和終止?fàn)顟B(tài)的坐標(biāo)，大小闯狱，以及透明度煞赢，這樣你就能夠做出更加復(fù)雜的動(dòng)效來(lái)。
5.Magic Animations
Magic Animations與Animate.css十分類似哄孤，也是一個(gè)預(yù)定義了一系列動(dòng)效的CSS庫(kù)照筑。但與Animate.css的最大區(qū)別可能是，它定義的那些動(dòng)效更炫也更酷一些瘦陈，如果你的網(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)。
<div data-anijs="if: click, do: flipInY, to: .container-box"></div>
7.Single Element CSS Spinners
我們經(jīng)常會(huì)需要一些動(dòng)效來(lái)表達(dá)系統(tǒng)處于加載或處理數(shù)據(jù)的過(guò)程中咏花。Single Element CSS Spinners這個(gè)在GitHub上的項(xiàng)目趴生，提供了一組非常漂亮的可用于加載的CSS3動(dòng)效阀趴。
8.Snabbt.js
Sanbbt.js是我很喜歡的一個(gè)動(dòng)效庫(kù)，它非常小巧只有5K苍匆，所以可以被用在移動(dòng)應(yīng)用中刘急。而且它也支持鏈?zhǔn)秸Z(yǔ)法，你可以很方便地寫出復(fù)雜的動(dòng)效組合浸踩。
snabbt(element, {
position: [200, 0, 0],
easing: function(value) {
return value + 0.3 * Math.sin(2*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)畫效果检碗。
10.Hover.css
Hover.css提供了大量的Hover效果据块，包括2D變換，圖標(biāo)變換折剃，背景變換等等另假。而且?guī)缀蹩梢詰?yīng)用于所有元素，包括鏈接怕犁，按鈕边篮，logo，SVG甚至圖片等等奏甫。
簡(jiǎn)書簽約作者：技匠戈轿，以上內(nèi)容歡迎大家分享到朋友圈/微博等。如需轉(zhuǎn)載阵子，請(qǐng)通過(guò)簡(jiǎn)信聯(lián)系授權(quán)思杯。謝謝大家！
