CSS vs. JS Animation: Which is Faster? | Hacker News Reader

CSS vs. JS Animation: Which is Faster?

davidwalsh.name

77 pointsArtDev17 comments

The main benefit of using CSS Transitions and Animations on the accelerated properties (transform & opacity) is that the animation will be run by the compositor (at least in WebKit browsers; I think Blink's new animation engine changes this).

Running the animation in the compositor means:

1. You avoid a style recalc on every frame (which can be a big deal).

2. The animation keeps running even if the WebProcess gets contended (by painting new content, handling slow JavaScript, GC).

It's fine to mess with transform and opacity from JavaScript, and for gesture handling you have to, so it needs to be fast, but it has more overhead than a CSS Animation would have.

This is generally true in Gecko as well, although neither Gecko nor WebKit are guaranteed to run animations on the compositor if they decide that it isn't worth it in some circumstance.

Also to note, it's often more performant to use translate3d instead of translate2d even if you only want a 2d animation because translate3d off-loads to the GPU.

http://jsperf.com/translate3d-vs-xy/28

The author of GSAP made essentially the same argument over a year ago, with somewhat different points:

http://css-tricks.com/myth-busting-css-animations-vs-javascr...

The main benefit of using CSS anything is less code. Less javascript to maintain, less code to test, less bugs. A compile error in javascript means your entire site doesn't work. An error in CSS means a single definition gets skipped.

I agree. A much more interesting topic for me would've been: "CSS or JS Animations: does it matter?" I would say if you have so much animations that CSS can't handle it it's too much. But thats just a rule of thumb from my gut feelings.

I wonder how it's compared to AngularJS ngAnimate? ( http://www.nganimate.org/ )

nganimate doesn't handle the actual animations, it just adds css classes or calls js at the proper points in the DOM fragment's lifecycle. The example site is using CSS3 for the animations.

Why is it that so few articles on how to do this or that in some HTML/CSS/JS way do not actually just do it? Where is the JS Fiddle?

you guys may be interested in an issue i opened a bit ago, some interesting perf jsfiddles in there to ponder.

https://github.com/julianshapiro/velocity/issues/6

also, plz contribute to the discussion there if you feel inclined.

This Adobe post has an excellent summary of browser render paths for animation: http://blogs.adobe.com/webplatform/2014/03/18/css-animations...

http://css-tricks.com/myth-busting-css-animations-vs-javascr...

what about the third option? neither.

less is more when it comes to the web. it really is.

Neither is faster? Each one is slower than the other?

head explodes

> Neither is faster? Each one is slower than the other?

For regular comparable x & y:

    not (x > y) and not (y > x) --> x = y

So "neither is faster" means "they are equally fast", not "each one is slower than the other".

  const x = parseInt("CSS");
  const y = parseInt("JS");

  if ( (!(x > y) && !(y > x))  !=  (x == y) )
      console.log('Sometimes "neither is faster" is not the same as "equally fast"');

No the third option is neither. Css vs js vs neither. Your web page is faster if you don't use animations. Most efficient way to add web page fluff is a non sequitur

Reply on news.ycombinator.com