60

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

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

Update:

I've tried using Scriptaculous' Effect.Fade on 5 different DIVs (each containing a canvas with some lines). Doing the exact same thing using CSS transitions, I see absolutely no difference in performance. Both were 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 (OSX), Google Chrome 5 and FireFox 3.7pre. Same results across the board.

In answer to UpHelix'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).

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
desau
  • 3,001
  • 1
  • 24
  • 27
  • 1
    One thing to consider (3 years into the future) - perhaps your computer is powerful enough to run both effortlessly. As you said, "both were very smooth". Perhaps try some more borderline tests, or do tests on a slower computer. – andrewb May 22 '13 at 03:32
  • but there is another side - cross-browser support. I have old site that not working in FF but do in all other browsers. I think it's serious issue. – aleXela Aug 22 '13 at 10:23

4 Answers4

25

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

Mechlar
  • 4,946
  • 12
  • 58
  • 83
  • 36
    You can use a JS event handler to trigger a CSS animation (e.g. by adding a class name to an element, or setting the relevant style property directly) thereby getting the best of both worlds. – NickFitz Jun 08 '10 at 17:40
  • Yeah, but does using js kills the performance gains you get by using CSS? – Scott Sword Apr 24 '13 at 01:14
  • 4
    @Swordfish0321 No, it doesn't. YOu just use the JS to trigger the CSS animation. The animation itself is then done with CSS Transition. – yunzen Apr 24 '13 at 13:57
  • 4
    "Jquery is by far the best for js animations" -- citation needed, I'm afraid – John Dvorak May 04 '13 at 04:13
  • 3
    "Query is by far the best for JavaScript animations". On what are you basing this statement? – Mircea May 04 '13 at 11:52
  • ...and you don't even have to change the style on the div to trigger an animation. you can change the style on a parent and all the children will animate to their new states. very fast and flexible – mmaclaurin Jul 03 '13 at 00:45
  • 2
    @Mircea I'm thinking the only reason people found that statement valid was because it was written in 2010. Things have changed a lot since then. If anything, the jQuery animations library is by far the slowest (up to 20 times slower than other JavaScript animation packs). – Alternatex May 07 '14 at 22:10
15

To add to Mechlar'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.

Mechlar
  • 4,946
  • 12
  • 58
  • 83
Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
  • 1
    This sounds plausible enough, but the exact opposite answer (that the overhead of running a little JS code sixty times a second is negligible) is also plausible. The only way to settle it is to find hardware comparable to what users have and run the experiment. According to the question, desau's experiment found the opposite of this answer—the two alternatives performed the same in practice. – Jason Orendorff May 29 '12 at 15:36
5

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

Mourner
  • 3,171
  • 24
  • 21
4

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/

Mircea
  • 11,373
  • 26
  • 64
  • 95