Should I rely on CSS3 for animation, or use JavaScript for the benefit of non-WebKit browsers?

I am working on a website, where I am still at the concepting phase. It is going to be really cool with some nice simple transform animations.

But now I am not sure whether I should use the latest technology (CSS3/HTML5) to do my animations to play nice on webkit browsers and to create a fallback website for non-webkit. Which will probably not take a lot of my time and turn out pretty smoothly.

Or alternatively I could try to fake the ani开发者_开发技巧mations with JS, which will take me more time to figure stuff out and will not look as pretty and smooth. Also there are no real straight forward/as pretty solutions available at this moment. Transform3d by Heygrady gets close but lacks a few functionalities I need, and with my limited JS skill I am unable to dive in it and build it myself.

In my opinion use HTML5/CSS3 for animations. As long as it doesn't affect core functionality (e.g. visitors without support can still navigate/read/submit forms/etc) then leave the pretty stuff for those browsers that support it.

Javascript animation can be smooth and look very good, but as you said it will take longer to write and will be harder to maintain.

If I am redesigning an existing website then I'll check Analytics/server logs to see what the most popular browsers are for the target audience. If 90% of them are on IE7 then I'll code the site accordingly!

Hope that helps

I think it depends on what audience you are targeting.

Use CSS in these cases:

• For iOS devices, because CSS transition is hardware accelerated
• 3D transform needed, because you can only do it with CSS

Use JavaScript in these cases:

• You need fine control over frame rate or precise position of moving objects, because you can't do it with CSS

Depending on what you want to do animation-wise, jQuery might help you do it more easily, with reasonable performance.

• http://api.jquery.com/category/effects/