
CSS vs. JS Animation: Which is Faster? - ArtDev
http://davidwalsh.name/css-js-animation
======
randallu
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.

~~~
pcwalton
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.

------
ngokevin
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](http://jsperf.com/translate3d-vs-
xy/28)

------
gavinpc
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...](http://css-
tricks.com/myth-busting-css-animations-vs-javascript/)

------
windsurfer
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.

~~~
emsy
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.

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

~~~
mbell
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.

------
Theodores
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?

------
leeoniya
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](https://github.com/julianshapiro/velocity/issues/6)

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

------
davedx
This Adobe post has an excellent summary of browser render paths for
animation: [http://blogs.adobe.com/webplatform/2014/03/18/css-
animations...](http://blogs.adobe.com/webplatform/2014/03/18/css-animations-
and-transitions-performance/)

------
chriscareycode
[http://css-tricks.com/myth-busting-css-animations-vs-javascr...](http://css-
tricks.com/myth-busting-css-animations-vs-javascript/)

------
ASneakyFox
what about the third option? neither.

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

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

 _head explodes_

~~~
dragonwriter
> 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".

~~~
Lockal

      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"');

