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 JavaScript animation libraries? (script.aculo.us, sc

Answer 1

To add to Uphelix'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 2

CSS animations have the advantage of being processed by the browser. Fast computations and optimizations are available. In my opinion web animations performance should be looked trough a "holistic" point of view. After all an animation, in terms of FPS, can not be faster then the browser refresh.

The real performance level is given by the overall UI performance. A JS and a CSS animation can look similar. However CSS animations win since they do not block the UI thread.

Stoyan Stefanov wrote and demo how CSS animations are put out of the UI thread: http://www.phpied.com/css-animations-off-the-ui-thread/

Answer 3

You will notice the difference on mobile browsers (iPhone, Android, etc.).

Answer 4

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.

In my opinion, jQuery is the best for JavaScript animations in 2010. See jQuery Demos