For quick Web Animations, Javascript/jQuery or CSS3?

Question

jQuery animations seem to have better browser support, but the CSS3 Keyframes appear to be really fast and smooth yet not very good browser support.

I'd like to here people's opinion about jQuery or CSS3 in terms of:

Canvas Gaming: I have seen a few CSS3 games which where pretty nice. Then again, when we are gaming with the Canvas we are already using Javascript and to do some quick and dirty stuff we might also include the jQuery Javacsript Library.

Or would we use both for Canvas Gaming? Not sure.

Websites: For normal websites delivering content, not gaming: what would be a decent approach for animations on a regular Web Page?

---

I also hear stuff such as: CSS3 Animations slows down some jQuery Animations and other scripts on the page...hm.

To clear things up, I would just someone to explain some of the advantages of using CSS3 Animations or a jQuery Animation. Any opinions would be nice, thanks!

Answer 1

The Mozilla developer documentation raises some interesting points regarding CSS3 animation :

Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

WebKit also makes use of hardware accelerated compositing , which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.

It stands to reason browser vendors will only increase their support for this in the name of competition, and because the CSS3 standard is getting closer to completion.

My only concern would be the manageability of the code, although this could easily be managed with a decent translation layer. There are some excellent animation engines available in Javascript , although I haven't used or researched one recently to give an accurate estimate of performance.

Answer 2

For the part of your question Re: "Websites: For normal websites delivering content", you are going to want to interact with a server for some of that content. That interaction is going to be via ajax and, based on your question, jquery-based. Then consider some of your animations will be based on the exact data returned.

jQuery makes that kind of content-dependent animation so easy. In a "normal website delivering content" you would, logically, have much less animation than in a game - so performance / resource hogging is less of an issue.