10個頂級的CSS和Javascript動畫框架推薦

在網站中嵌入動畫已成爲近年來的一個設計趨勢，許多公司都已開始轉向並擁抱HTML五、CSS3和JavaScript這個技術「三人組」。儘管這些技術還不能製做一些很是複雜的動畫（像flash所實現的），可是若是擁有好的想法及創造性思惟，使用它們製做的即使是一些簡單的動畫也足以打動咱們。 

並且，隨着CSS3技術的發展，CSS3動畫日益流行。目前，WebKit瀏覽器已對CSS3動畫支持得至關好。Firefox已經打算採用Webkit代碼，IE 10中也會加入Webkit支持。 

本文介紹一些JavaScript和CSS動畫框架，我的認爲至關實用，但願它們能幫助你建立出使人着迷的用戶體驗。 

1. jQuery Transit 

該jQuery插件擴展了jQuery的動畫功能，增長了許多CSS3特性，如rotata（旋轉）、skew（扭曲）、scale（縮放）等。 

2. Transform.js 

這也是一個jQuery插件，不過它擴展的是animate()與css()方法的功能。經過其引入的CSS3屬性你能夠完成一系列的動畫效果。 

3. Paper.js 

Paper.js是一個開源的矢量圖形腳本框架，運行於HTML5 Canvas（畫布）之上。它提供了一個整潔的場景圖（Scene Graph）或文檔對象模型來建立矢量圖形，而且擁有許多強大的功能，能夠生成貝賽爾曲線等。全部這一切都經過一個精心設計的整潔一致的編程接口封裝了起來。 

4. Move.js 

Move.js是一個小巧的JavaScript庫，能夠建立很是簡單而優雅的CSS3動畫。 

5. JSAnim 

jsAnim是一個強大卻易於使用的JavaScript庫，絕對可讓你建立使人驚歎的動畫效果，而不會影響項目的可用性。它只有不到25KB，但卻很是強大。 

6. GX 

GX是一個功能完善的、跨瀏覽器的超輕量級（未壓縮狀態下只有10KB）JavaScript動畫框架。使用GX框架，你能夠利用全部的W3C CSS屬性來建立複雜動畫效果。 

7. Animatable 

純粹的CSS3動畫方案。這裏有一個demo，你能夠看見使用它能實現什麼樣的動畫效果。 

8. Animate.css 

Animate.css是一個可直接用於項目的有趣的、跨瀏覽器動畫方案，包括一個純粹的CSS3動畫庫及一些預約義的動畫片斷。 

9. $fx 

一個輕量級的JavaScirpt動畫庫，對JavaScript DOM函數進行了擴展。它體積很小（只有3.7KB）——健壯的實現，較低的學習成本，總之$fx是一個不錯的選擇。 

10. Scripty2 

Scripty2是一個強大靈活的JavaScript框架，可讓你編寫屬於本身的「可視化大餐」或者使人深入的用戶界面。它是Flash的競爭對手。