Which kind of animation is best for performance? css3 or javascript?

Question

Let´s say we have a website with a lot, heaps of animations, is it better for the performance/speed to use css3 for animations or javascript?

In general: Is it better to use as much html(5) and css(3) as you can instead of javascript and frameworks like jquery etc?

CSS3 for sure and like already said thousand times before... There are some jquery plugin which can handle most of the hard part as this one http://ricostacruz.com/jquery.transit/ — A. Wolff, Dec 12 '13 at 12:22
Has been said before with a clear answer: http://stackoverflow.com/a/10984853/2917187 — douweegbertje, Dec 12 '13 at 12:24
Comparing jQuery to CSS transforms is not the same as comparing JavaScript to CSS. This question should be distinct from the one listed above. The best comparison I've seen is here: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ — Luke, Mar 10 '14 at 17:16

score 0 · Answer 1 · answered Dec 12 '13 at 12:25

All browsers make CSS render before JavaScript, so on browsers which support CSS animation it would be best to use CSS.

Chances are your document already has a stylesheet anyway, and importing a library like jQuery purely for animation would unnecessarily increase the load time of the page.

There are several articles on how to create high performance animations within CSS. One of the best that I've read recently would be this HTML5Rocks article by Paul Lewis (Aerotwist) and Paul Irish (Google): http://www.html5rocks.com/en/tutorials/speed/high-performance-animations.

score 0 · Answer 2 · answered Dec 12 '13 at 12:34

0

Using keyframe for animation in CSS3 is better. Like this:

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

answered Dec 12 '13 at 12:34

Ringo

3,795
3
22
37

etoxin · Answer 3 · 2013-12-12T12:48:25.007

CSS animation is much faster. You need to be careful what CSS properties to use as some are not hardware accelerated on certain mobile devices like top:0; . Also too much animation will be sluggish on mobile devices. Try to use css transforms for your animation: transform: matrix3D(...)

2D and 3D CSS Transforms: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

happy Animating.

Also look into HTML5 Canvas if you want silky smooth animation.

Mykyta Shyrin · Answer 4 · 2013-12-12T12:32:16.853

-1

CSS3 better than javascript for performance.

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

edited Dec 12 '13 at 12:32

answered Dec 12 '13 at 12:24

Mykyta Shyrin

312
1
14

Have you some sources ? – Fabien Sa Dec 12 '13 at 12:29
I added link to jsperf.com. Thank you! – Mykyta Shyrin Dec 12 '13 at 12:32
3

Your jsPerf doesn't really tell us anything. You're comparing jQuery's animation method with its transition method with its CSS method. This is *all* JavaScript. – James Donnelly Dec 12 '13 at 12:48

score -1 · Answer 5 · answered Dec 12 '13 at 12:31

According to this link css3 performance is better than javacript.

In this website you can read the reason. It can be due to javascript animations based on timers can never be as quick as native animations, as they don't have access to enough of the browser to make the same optimisations. These animations should be used as a fallback only in legacy browsers. Now that browser support is so universal, there is rarely a case where javascript animations are preferable.

jQuery != JavaScript, so it's not a fair comparison. – Luke Mar 10 '14 at 17:17 — Luke, Mar 10 '14 at 17:17

Which kind of animation is best for performance? css3 or javascript?

5 Answers5