哪种动画最适合演出？ css3还是javascript？

Question

假设我们有一个网站，有很多动画，是否更好地将css3用于动画或javascript的性能/速度？

一般情况下：使用尽可能多的html（5）和css（3）是否更好，而不是像jquery等javascript和框架？

Answer 1

所有浏览器都会在JavaScript之前进行CSS渲染，因此在浏览器which support CSS animation上最好使用CSS。

无论如何，您的文档已经有了样式表，并且导入像jQuery 纯粹这样的动画库会不必要地增加页面的加载时间。

有几篇关于如何在CSS中创建高性能动画的文章。我最近读过的最好的一篇是Paul Lewis（Aerotwist）和Paul Irish（Google）撰写的这篇HTML5Rocks文章：http://www.html5rocks.com/en/tutorials/speed/high-performance-animations。

Answer 2

在CSS3中使用动画关键帧更好。像这样：

.yourClass{
  -webkit-animation: anim ease-in-out 1s;
}
@-webkit-keyframe anim{
   0%{
   }
   50%{
   }
   100%{
   }
}

Answer 3

CSS动画要快得多。您需要注意要使用的CSS属性，因为某些移动设备上没有硬件加速，例如top:0;。移动设备上的太多动画也会变得迟钝。尝试为动画使用css转换：transform: matrix3D(...)

2D和3D CSS变换： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

快乐的动画。

如果你想要丝般流畅的动画，也可以看看HTML5 Canvas。

Answer 4

CSS3优于javascript的性能。

http://jsperf.com/css-vs-animations-vs-transit

Answer 5

根据this link css3，性能优于javacript。

在本网站中，您可以阅读原因。这可能是由于基于计时器的javascript动画永远不会像原生动画一样快，因为他们无法访问足够的浏览器来进行相同的优化。这些动画应仅用作旧版浏览器的后备。既然浏览器支持是如此普遍，那么很少有javascript动画更适合的情况。