CSS和JS動畫，那個的效率更好。

首先，不要把JavaScript和jQuery錯誤的混為一談。 jQuery展示動畫會比原生JavaScript慢。 原因是儘管jQuery非常強大，但是他的目標從來不是成為一個高效能的動畫引擎。

由於jQuery提供了多種動畫介面，所以無法避免布局抖動的問題。jQuery的記憶體消耗頻會繁觸發記憶體回收機制，造成動畫丟幀的問題。jQuery為了保護其自身的動畫機制，使用setInterval取代requestAnimationFrame.

CSS的Transition

CSS的Transition的動畫邏輯是有流浪器來執行的，所以它的效能比JQuery動畫好。處理機制：

通過最佳化DOM操作，避免記憶體消耗來減少卡頓使用與requestAnimationFrame類似的機制強制使用硬體（GPU來提高動畫效能）加速

使用RAF介面並不需對現有的庫進行重構。 下面來比較一下RAF與setInterval的基礎用法:

var startingTop = 0;/* setInterval：為了達到60fps把間隔設為16ms   (1000ms/60 ~= 16ms). */setInterval(function() {    /* 因為此處每秒執行60次，所以我們將top屬性的增量設定為1/60秒 */    element.style.top = (startingTop += 1/60);}, 16);/* requestAnimationFrame: 當瀏覽器處於正常時，嘗試以60fps運行 */function tick () {    element.style.top = (startingTop += 1/60);}window.requestAnimationFrame(tick);

結論：使用RFA會以很少的代碼改動量擷取更高的動畫效能

說明

但是，是不是JavaScript就是比CSS Transition效能差呢。能不能讓JavaScript效能上更好呢。

移動端開發時，如果有簡單的狀態切換時，單純使用CSS Transition即可，如果有比較多的UI互動時，可以

使用Transit（JavaScript控制CSS Transition）。因此JavaScript是可以比CSS Transition效能更好。

Velocity.js

GreenSock動畫(GSAP)的功能豐富並不意味著Velocity自身的功能弱。 相反，Velocity不僅包含了jQuery的$.animate()的所有功能 ,而且還整合了顏色動畫, transforms, 迴圈, easings, 類動畫, 滾動動畫。所有的這一切，壓縮後僅僅只有7KB

簡而言之,Velocity相當於是把jQuery,jQuery UI,和CSS transitions結合了起來。

此外,從使用的角度來看,Velocity使用了jQuery的 .queue()方法,從而與jQuery的 .queue()方法,從而與jQuery的.animate() , .fade(), .fade() ,.delay() 功能無縫結合。由於Velocity的文法與$.animate() 是相同的, 所以你不需要改變你頁面中的代碼 。

先讓我們來初步瞭解一下 Velocity.js 與 $.animate()的相同點 :

$element    .delay(1000)    /* 用Velocity控制元素的向上運動持續2000ms */    .velocity({ top: "50%" }, 2000)    /* 當元素向上運動的動作完成後 使用jQuery內建的方法使元素淡出 */    .fadeOut(1000);

進一步，可以建立一個3D滾動的動畫情境也只是兩個簡單的代碼:

$element    /* 在1000ms內將瀏覽器滾動到元素的上方 */    .velocity("scroll", 1000)    /* 然後使元素沿著他的Y軸旋轉360度 */    .velocity({ rotateY: "360deg" }, 1000);