在web开发的圈子里，开发者常常认为css动画是一种高性能web动画技术，如果想让网页加载的更快一些，就应该用纯css动画。其实这种观点是错误的，很多开发者早就放弃了javascript的动画，迫使自己使用复杂的css样式来实现相同效果的ui交互。他们完全忽视了javascript带来的更好的交互性。
但事实是基于javascript的动画效果通常和基于css的动画一样快，有些甚至更快一些。css动画通常被觉得比较快，因为我们总是拿它和jquery动画相比，其实慢的是jquery的$.animate()，然而javascript的动画库避免了dom操作，常常比jquery快20倍左右。
所以，让我们一起粉碎那个谣言，写一些真实的例子，来评估一下javascript动画的性能。
为什么要使用javascript?
把属性转换到样式中的时候用css非常方便，而且在不使用其它库的情况下，它们也能提供出色的表现。但是当你使用css来实现复杂的设计时，它们变的非常麻烦。
总而言之，css一定会限制你的设计。但是如果你使用javascript，就可以从逻辑上解决这些问题。javascript的动画引擎提供如下功能：
跨浏览器的svg支持
基于物理学的动画加载
时间轴控制,
beziertranslations
提示：如果你对javascript的展示效果比较感兴趣，可以读一下julianshapiro的“cssvs.jsanimation:whichisfaster?”和jackdoyle的“mythbusting:cssanimationsvs.javascript.”。如果想看一些演示，可以看看performancepane和“libraryspeedcomparison”。
velocity和gsap
两个最常用的javascript动画库是velocity.js和gsap。这些库在使用jquery的时候并没有性能损耗，因为它们都没有使用jquery的动画栈。
如果你在页面中必须使用jquery，你可以用velocity和gsap来代替你的jquery$.animate()。比如
$element.animate({opacity:0.5});
可以写成：
$element.velocity({opacity:0.5}).
这两个库也当然也可以在没有jquery的时候使用：
/*workingwithoutjquery*/
velocity(element,{opacity:0.5},1000);//velocity
tweenmax.to(element,1,{opacity:0.5});//gsap
像上面的例子一样，即全不使用jquery，velocity也保留了和jquery的$.animate()类似的语法。
gsap和它相反，通过面向对象的设计，更方便了对静态方法的调用。你可以对动画进行全面的控制。
在这两种解决方案中，你都不会用到jquery的对象元素，但是如果是要操作原始的dom结点呢?你可以通过
document.getelementbyid
document.getelementsbytagname
document.getelementsbyclassname
document.queryselectorall
这些类似于jquery’sselector的实现。下面我们会对这些方法进行简单的介绍。
杜绝jquery
提示：如果你需要了解jquery的$.animate()，可以看看velocity’sdocumentation.。
让我们看看queryselectorall的功能：:
document.queryselectorall(body);//getthebodyelement
document.queryselectorall(.squares);//getallelementswiththesquareclass
document.queryselectorall(p);//getallps
document.queryselectorall(#main);//gettheelementwithanidofmain
document.queryselectorall(#mainp);//getthepscontainedbymain
向代码展示的一样，你可以通过queryselectorall简单的进行对css的选择。它会在数组中返回所有匹配的元素：
/*getallpelements.*/
varps=document.queryselectorall(p);
/*animateallpsatonce.*/
velocity(ps,{opacity:0.5},1000);//velocity
tweenmax.to(ps,1,{opacity:0.5});//gsap
因为我们没有使用jquery的对象元素，你可能会好奇我们应该怎么把动画链接起来，其实我们可以这样做：
$element//jqueryelementobject
.velocity({opacity:0.5},1000)
.velocity({opacity:1},1000);
在velocity中，你可以像这样简化你的代码：
/*theseanimationsautomaticallychainontooneanother.*/
velocity(element,{opacity:0.5},1000);
velocity(element,{opacity:1},1000);
这样来处理动画就不会存在性能上的浪费。你会发现它javascript的性能真的和css差不多，而且操作更方便。
极客标签-专业和精准的分享，关注你感兴趣的极客，社区提供超棒的精品教程，互动授课
了解前端技术，请访问极客互动课程库和代码录播
原文来自：放弃使用jquery实现动画