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的$.animate() , $.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);