CSS and JS Transition Package Performance

Question

I am wondering if there is a performance difference using CSS Transitions or any of the various JavaScript animation libraries? ( script.aculo.us , scripty2 , jsAnim , MooTools , $fx , etc.).

I tried various tests in Safari and Chrome, but actually I don't see any difference. I thought CSS transitions should be hardware accelerated.

---

Update

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

I tried this on Safari 4, 5 (OSX), Google Chrome 5 and FireFox 3.7pre. The same results in all directions.

In response to UpHelix's answer, you are not just limited to hover , etc. You can trigger a transition by changing any transitionable style. For example, set the opacity of an element in JavaScript (after that you specified transitionPropery and transitionDuration for this element).

Answer 1

Yes, there is a difference, CSS is much faster. It can be difficult to see until you start to run a lot at the same time or even more so they do it. CSS animations are limited though. In most cases, they really only work on the event :hover . Using JavaScript, you can perform animation in any case: click , mouseover , mousemove , mouseout , keyup , keydown , etc.

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

Answer 2

To add the (correct) answer to Uphelix: JavaScript is an interpreted language, and the browser JS engine must parse and execute each instruction at runtime (I know that there are JS compilers like V8 (used in Chrome), but the principle remains same).

On the other hand, browsers can implement CSS transitions natively, for example. in C / C ++ or something like that. This code will be compiled for machine language.

Whether CSS transitions are hardware accelerated or not depends on the methods used by the browser, the platform on which the browser is running, etc.

Answer 3

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

Answer 4

CSS animations have the advantage of being handled by the browser. Fast calculations and optimizations are available. In my opinion, web animation performance should be viewed from a “holistic” point of view. After all, animation from the point of view of FPS cannot be faster than updating the browser.

The actual level of performance is determined by the overall performance of the user interface. JS and CSS animations may look similar. However, CSS animations benefit because they do not block the user interface stream.

Stoyan Stefanov wrote and demonstrated how CSS animation is pulled out of the user interface stream: http://www.phpied.com/css-animations-off-the-ui-thread/

Answer 5

CSS animations are much faster than a request, and any libraries that work with javascript. The reason is that the CSS3 platform uses the GPU, not the processor. Animation - This is an extensive processor operation, matrix multiplication and Fourier transform on each pixel make the animation difficult.

The following is a very well-explained article. go through it which compares CSS, jquery and GSAP.

The GSAP library is 20 times faster than jQuery.

http://knowledge-cess.com/animation-and-the-role-of-gpu-a-performance-factor/