1

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!

3
  • If you're writing cool canvas games, I don't think supporting IE6 will have to be a huge priority - use css3 animations with gusto if they're the best option for a particular situation. Commented Dec 25, 2011 at 2:26
  • Dropped43, this question is bound to get shut down quick. People are gung ho about removing questions which don't flash red "ANSWER ME DEFINITIVELY". Change "people's opinions" to anything else, like "Is it possible" or "how do I" or "I swear this is a question, I am NOT asking for people's opinions, or a list of answers, or the best answer, no, this is clearly a question-answer situation" Commented Dec 25, 2011 at 19:16
  • Browsers do not support jQuery. It is jQuery that supports browsers. But jQuery is just javascript. Commented Jan 12, 2012 at 19:10

2 Answers 2

3

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.

Sign up to request clarification or add additional context in comments.

Comments

1

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.