Best technology for simple animations CSS3, Jquery or using html5 canvas?

[Mamoun]

Hi,

I have been looking for the best way to provide simple animations in a website, the animations should be part of a rotating "banner" showcasing featured items on the homepage, I'm using a simple "slider" right now with static images but I'm trying to add a little more eye candy to it.

I have googled that question already, but didn't find an exact answer for my specific needs, what in these 3 solutions can provide:

1- Graceful degradation (Progressive enhancement)

2- Most compatibility

3- Best performance

The first item is the most important, as the website owner (well, my brother :p) wanted a flash slider at first, which I completely hate as I feel flash content has plenty of disadvantages and I wanted a better solution that doesn't depend on a plugin, having a way to do animations that would still allow users with disabled javascript or even disabled images to be able to read the content normally would be great.

Please also note that the animations has to fire only when the "slide" is changed, and if an item is shown first with an animated fade-in for example, it shouldn't show up before completely loading the page (something that drove me crazy with jquery, flash of the content before it disappear again and then show with the animation).

Thank you for reading all of this! :)

[primexx]

you probably want a CSS3 primary solution, then check what it breaks in, and use JS compatibility hacks for them.

[ACTIONpack]

You will need to use all 3 technology to get it working right if it's really complex. If it's really simple don't care if it works in older browsers then CSS3 and HTML5 is okay.

[threetonesun]

  On 10/01/2013 at 16:46, Mamoun said:

I have googled that question already, but didn't find an exact answer for my specific needs, what in these 3 solutions can provide:

1- Graceful degradation (Progressive enhancement)

2- Most compatibility

3- Best performance

Javascript. Canvas and javascipt are essentially the same answer, except you have even less support for canvas. CSS3 can do transitions, yes, but support isn't great and I think that in terms of how CSS should be used, it's a bad idea.

Javascript, however, should degrade perfectly well if the HTML behind it is fundamentally sound, will be the most contemptible, and for something simple like a slider, has no real performance issues.