【收藏】20款CSS3動畫庫，你值得“擁有”

標籤：

轉載自點擊這裡

 

今天逛“市場”看到一些不錯的CSS3動畫庫，感覺很不錯，就收藏了，分享給大家拉。協助開發人員在一定的期限內取得有創造性和創新性的成果。

1. Kite 

 Kite是一個靈活的布局助手CSS庫。Kite使用`inline-block`而不是最新的CSS文法。它注重實際，易於理解且容易使用。 Kite用法與flexbox相似：justify-content,等等。你可以很輕鬆地建立複雜的模組。Kite是基於OOCSS 與 MindBEMding，它可以協助您快速構建自己的組件。Kite支援幾乎所有瀏覽器，它屬於MIT許可。 

2. DynCSS 

 DynCSS 將您的CSS解析成-dyn-(attribute)規則。這些規則是類比瀏覽器事件(如滾動和縮放)的javascript運算式。其結果會應用到上面指出的CSS屬性。你可以將任何CSS屬性設定為動態–前提是它對於jQuery的css()方法是可寫的。你可以通過附加-dyn-首碼並指定一個引用的javascript運算式來實現。 

3. Progressjs 

ProgressJs 是一個 JavaScript 和CSS3庫，可以協助開發人員建立和管理頁面上所有元素的進度。你可以設計自己的進度條模板並且可以輕鬆自訂它。你也可以用ProgressJs 來為使用者顯示內容載入（圖片，視頻等）的進度。它可以用在textbox，textarea 甚至整個body上。 

4. Hover.CSS

Hover.CSS 是一個有用的CSS3懸停效果集合，可用於動作調用，按鈕，商標，特性圖片等。 自定或直接應用到你自己的元素上都非常的簡單。 hover.css可以用多種方式來使用; 可以複製粘貼你喜歡的效果到你自己的樣式表裡，也可以引用樣式表。然後只需向你想要的元素需添加對應效果的class名稱即可。如果你只打算使用一個或幾個效果，最佳實務是複製粘貼一個效果。 

5. Spinkit 

 Spin kit是一個酷炫的載入動畫CSS集合。 Spinkit使用CSS動畫來建立迷人的易於自訂的動畫。該集合目標不是提供所有瀏覽器的解決方案–如果你需要支援哪些還沒實現CSS動畫屬性（像 是IE9及之前的版本）的瀏覽器，你需要檢測下這些動畫屬性並實現一個變通方案。 

6. Magic CSS3 Animation 

Magic CSS3 Animations 是一個特殊效果的CSS3動畫庫，你可以免費用於你的web項目。簡單的引用CSS樣式：magic.css或精簡版magic.min.css即可。 

7.Bounce.js 

Bounce.js是一個用來產生不錯的CSS3驅動主要畫面格動畫的工具。用於產生動態動畫的JS庫是在該工具中投入使用。簡單地添加一個組件，選擇預設，然後你就會得到一個短URL地址或者匯出到CSS。 

8. ImaCSS

 

Imacss是用來將影像檔轉換為資料地址的庫和應用。該地址可以用來插入到CSS檔案中作為背景圖片。本質上來講，它能讓你減少所有你對你設計的圖片（標等）的HTTP請求，並使之能夠單個調用。

9.Buttons 

Buttons是一個可以建立高度自訂、靈活和現代感十足的web按鈕的CSS庫。該庫由Sass+Compass構建，支援正方形、圓角矩形或 者圓形的按鈕，並且可選是否扁平以及其他自訂的效果（如發光）。所使用到的尺寸、顏色、效果和字型可以通過變數的協助進行修改，並且可以非常容易的進行 擴充。 

10.OdoMeter

 OdeMeter是一個用來建立一些我們比較熟悉的如“**裡程顯示，機場資訊板或角子機”等效果或者面板的JavaScript-CSS庫。該庫 是獨立式+輕量級（3kb）的，使用CSS為效果進行轉換，所以效率極高（當然也有回退設定）。它簡單地將一個給定的元素轉換到另一個具有單行函數的預定 義的值。 

11. Single Element CSS Spinner 

Single Element CSS Spinners是一個CSS螺旋動畫載入的集合。每個旋轉包含一個使用‘loader’ class的div，其常值內容為‘Loading…’。文本是為螢幕助讀程式使用的且可用作老瀏覽器的後退的狀態。 

12. Ani.js 

AniJS是一個CSS動畫的聲明處理庫，它能夠使開發更便利且能提高開發速度。它文檔完善且易於上手。 

13. Beautons 

Beautons是一個用來建立漂亮、簡潔按鈕的易用庫。你可以應用各種樣式、函數已經其他的更多內容到按鍵上，包括改變它們的大小，設定它們的可用與否以及更多設定。 

14. Saffron 

Saffron是一系列Sass混合器和助手集，能夠使添加CSS3的動畫和過渡非常簡單。只需要包括一個mixin在SASS聲明中，然後使用變數和混合參數設定一些配置。使用Saffron，你能夠完全控制動畫和過渡的行為。 

15. CSS Shakes 

這是一個能夠震動和晃動‘DOM’的CSS類集合。 

16. Typebase.css 

Typebase.css是個最小化的、可定製的字型樣式表。它有less和SASS版本，所以能夠很容易地修改融入現代的Web項目。它提供了所 有排版所必要的基礎工具且不需添加其他任何設計內容。它被建立用來完成項目發展和成長期時的修改，能和normalize.css很好的工作。 

17. Sassline 

在web上使用Sass & rems設定文本到基準網格。Sassline可以用在部落格、prototyping以及其他Web項目。它有建議的基礎字型樣式和混合比例已達到基準網 格的良好配合。為每個斷點選擇一個modular-scale，其運行響應將會更好。 

18. TypeSettings 

一個Sass工具包，基於modular scale有Ems風格，縱向風格，響應比基於headlines。 

19. Type Rendering Mix 

Type Rendering Mix是個小型的JavaScript庫，它允許只有使用核心文本時（在iOS和OS X上）才應用樣式，在實現更一致的渲染同時保持高精度原態。 

20. Hint.css 

Hint.css是一個使用SASS構建只使用CSS和HTML的提示庫。該庫使用資料屬性、內容屬性、虛擬元素以及CSS3轉換。提示框簡潔漂亮，有箭頭且可放置在父元素的任何一邊。

【收藏】20款CSS3動畫庫，你值得“擁有”