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

　　現在的網(wǎng)站和App的設計中越來(lái)越重視用戶(hù)體驗，而優(yōu)秀的動(dòng)效則能使你的應用更具交互性，從而吸引更多用戶(hù)的使用。下面將為大家帶來(lái)10個(gè)值得前端收藏的CSS3動(dòng)效庫，歡迎閱讀!

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

　　1.Animate.css

　　Animate.css是我比較喜歡的一個(gè)CSS3動(dòng)效庫，非常適合那些對CSS3動(dòng)畫(huà)效果不熟悉，但又希望給自己所做的網(wǎng)站或基于H5的APP引入動(dòng)效的朋友。因為，你只需要給需要實(shí)現動(dòng)效的元素添加上Animate.css中預定義的那些動(dòng)效名稱(chēng)就可以了。比如常見(jiàn)的：bounce，flash，fadeIn，fadeOut等等，加起來(lái)有75種不同的動(dòng)效，完全能夠滿(mǎn)足你的基本需要了。

　　當然對于這個(gè)庫也有一些使用注意事項，比如你最好在給元素添加動(dòng)效樣式完成動(dòng)效后，馬上將這個(gè)動(dòng)效樣式去掉。另外，對于動(dòng)效的時(shí)長(cháng)，振動(dòng)幅度等，你也需要做一些調整。因為，我感覺(jué)它默認設置中的動(dòng)效過(guò)于快速和強烈了。Animate.css已經(jīng)提供了詳細的文檔告訴你應該如何做這些調整。

　　2. Bounce.js

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

　　3. CSS3 Animation

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

　　4. CSS Animate

　　如果你覺(jué)得上面的工具還無(wú)法做出你想要的動(dòng)效，那么可以看看CSS Animate這個(gè)工具。它能讓你設置更多的動(dòng)效參數，比如你可以同時(shí)設置動(dòng)效起始和終止狀態(tài)的坐標，大小，以及透明度，這樣你就能夠做出更加復雜的動(dòng)效來(lái)。

　　5. Magic Animations

　　Magic Animations與Animate.css十分類(lèi)似，也是一個(gè)預定義了一系列動(dòng)效的CSS庫。但與Animate.css的最大區別可能是，它定義的那些動(dòng)效更炫也更酷一些，如果你的網(wǎng)站也很新潮，那可以考慮使用這個(gè)CSS動(dòng)效庫。

　　6.AniJS

　　AniJS是一個(gè)通過(guò)JavaScript控制的動(dòng)效庫。它允許你通過(guò)它的鏈式語(yǔ)法來(lái)定義動(dòng)效。比如下面這個(gè)例子：當用戶(hù)點(diǎn)擊時(shí)這個(gè)元素會(huì )沿Y軸翻轉。

　　7. Single Element CSS Spinners

　　我們經(jīng)常會(huì )需要一些動(dòng)效來(lái)表達系統處于加載或處理數據的過(guò)程中。Single Element CSS Spinners這個(gè)在GitHub上的項目，提供了一組非常漂亮的可用于加載的CSS3動(dòng)效。

　　8.Snabbt.js

　　Sanbbt.js是我很喜歡的一個(gè)動(dòng)效庫，它非常小巧只有5K，所以可以被用在移動(dòng)應用中。而且它也支持鏈式語(yǔ)法，你可以很方便地寫(xiě)出復雜的動(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)給數字作動(dòng)效的，比如通過(guò)它你可以很好地呈現網(wǎng)站人數的增加，倒計時(shí)等與數字相關(guān)的動(dòng)畫(huà)效果。

　　10.Hover.css

　　Hover.css提供了大量的Hover效果，包括2D變換，圖標變換，背景變換等等。而且幾乎可以應用于所有元素，包括鏈接，按鈕，logo，SVG甚至圖片等等。

【10個(gè)值得前端收藏的CSS3動(dòng)效庫】相關(guān)文章：

十個(gè)值得前端收藏的CSS3動(dòng)效庫01-20

H5動(dòng)效設計中的常見(jiàn)制作手法05-12

解讀刷屏級H5排版以及動(dòng)效08-09

超贊的刷屏級H5排版以及動(dòng)效02-01

學(xué)習前端的心得01-27

使用CSS3創(chuàng )建卓越的網(wǎng)站設計03-21

CSS3中的opacity屬性使用教程06-20

web前端技巧解說(shuō)06-11

CSS3實(shí)現選項卡切換的方法08-05