基于JavaScript的动画竟然已经默默地比CSS的transition动画快了？而且，Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点？这篇文章将会逐点讲解基于JavaScript的DOM动画库，比如Velocity.js和GSAP，是如何比jQuery和基于CSS的动画库高效的。
CSS vs. JS Animation: 哪个更快?
jQuery
实现的例子
var currentTop,
currentLeft;
/* 有布局震荡 */
currentTop = element.style.top; /* QUERY */
element.style.top = currentTop + 1; /* UPDATE */
currentLeft = element.style.left; /* QUERY */
element.style.left = currentLeft + 1; /* UPDATE */
/* 没有布局震荡 */
currentTop = element.style.top; /* QUERY */
currentLeft = element.style.left; /* QUERY */
element.style.top = currentTop + 1; /* UPDATE */
element.style.left = currentLeft + 1; /* UPDATE */
var startingTop = 0;
/* setInterval: 每16ms运行一次来达到60fps (1000ms/60 ~= 16ms). */
setInterval(function() {
/* 由于这里的代码会在1s内执行60次，所以我们把top属性每秒1单位的增长分成60份 */
element.style.top = (startingTop += 1/60);
}, 16);
/* requestAnimationFrame: 不管浏览器是否处于最优状态，都试图运行在60fps */
function tick () {
element.style.top = (startingTop += 1/60);
}
window.requestAnimationFrame(tick);
CSS Transitions
JavaScript Animation
$element
/* 将元素向下滑动到视图中。 */
.velocity({ opacity: 1, top: "50%" })
/* 延迟1000ms，元素滑动出视图 */
.velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });
Velocity.js
$element
.delay(1000)
/* 使用Velocity的2000ms内改变元素top属性的动画*/
.velocity({ top: "50%" }, 2000)
/* 当上面Velocity动画执行完时，使用标准的jQuery方法来使元素淡出*/
.fadeOut(1000);
$element
/* 在1000ms内，浏览器滚动到这个元素的顶部 */
.velocity("scroll", 1000)
/* 之后使元素绕着它的Y轴旋转360度。 */
.velocity({ rotateY: "360deg" }, 1000);
结束语
原文链接：https://davidwalsh.name/css-js-animation
翻译来源：http://www.zcfy.cc/article/css-vs-js-animation-which-is-faster-4635.html?t=new
服务热线 19970861797
![iwebshop阿里云短信服务插件 [初级版]](https://1eqimg.oss-cn-shenzhen.aliyuncs.com/upload/2017/07/0520170705104255689.jpg)