Performance of CSS Transitions vs. JS animation packages

Question

I'm wondering - is there any difference in performance of using CSS Transitions vs. any of the various JS animation libraries? (scriptaculous, scripty2, jsAnim, MooTools, $fx, etc, etc).

I've tried various tests in Safari / Google Chrome, and I don't actually see any difference -- I thought that CSS Transitions were supposed to be hardware accelerated.

---

edit:

I've tried using Scriptaculous' Effect.Fade on 5 different DIV's (each containing a canvas with some lines). Doing the exact same thing using CSS transitions, I see absolutely no difference in performance. Both are very smooth with one DIV/Canvas, but both are very slow when I do more than 2 at a time.

I've tried this in Safari 4, 5 (OS X), Google Chrome 5 and Firefox 3.7pre. Same results across the board.

In answer to Dale's response - you're not simply limited to hover, etc. You can trigger a transition by changing any "transitionable" style. For instance, set the opacity of an element in javascript (after, you've specified the transitionPropery and transitionDuration for that element).

Answer 1

Yes there is a difference, css is much faster. It may be difficult to see until you get many running at the same time or the more they do. Css animations are limited though. In most cases they really only work off the :hover event. With javascript you can perform animations at any event: click, mouseover, mousemove, mouseout, keyup, keydown, etc.

Jquery is by far the best for js animations. See http://jqueryui.com/demos/

Answer 2

To add to Dale's (correct) answer: JavaScript is an interpreted language and the JS engine of the browser has to parse and execute every instruction during run-time (I know there exist JS compilers, like V8 (used in Chrome), but the principle remains the same).

On the other hand, browsers can implement CSS transitions natively, e.g. in C/C++ or something. This code will be compiled to machine language.

If CSS transitions are hardware accelerated or not, depends on the techniques the browser uses, the platform the browser runs on, etc.

Answer 3

Desau: did your test include scripts other than the animations? As animations rely on setTimeout/setInterval, they won't be smooth if other scripts get in the way.