I'm working on a webapp (will only be running in Chrome 19+) that is currently built with CSS3 transitions. More specifically, I'm using Jquery Transit to fire the CSS3 animations with Jquery itself. The reasoning here was that some of the animations are drawn out for several seconds and jquery animate wasn't smooth enough, but Transit is a great fix for this. Jquery Transit is working quite well but I'm curious to whether HTML5 Canvas will render things even smoother? And if so, is it worth pursuing, given the fact that I'm using AJAX and percentage-based locations for DIVs currently? If anyone here knows how CSS3 Animations compare to HTML5 Canvas performance in Chrome and would be willing to give their input I would greatly appreciate it!
Answers
CSS3 will give you fewer headaches and you can change it easily in the future, and it will work gracefully on systems that aren't canvas-enabled.
If you're using text, you should absolutely stick with CSS if you can get away with it. Canvas ruins the accessibility of your app and disallows users from using a carat or highlighting text or using text to speech.
If you're just making a funny sliding button or something then you should also just use CSS as it will probably be much easier to implement and maintain. Redoing CSS is easier than slogging over (what can be complex) JavaScript.
I can't honestly tell you if canvas renderings will be smoother. One plus of the canvas is that you can animate things to a seemingly larger size (while keeping the canvas the same size) without having to cause the DOM to re-layout. On most modern systems this really isn't an issue thought.
Furthermore, if its already done with CSS3, are you actually having performance problems? If nobody has complained about performance yet, why bother rewriting it for canvas? If you aren't encountering any real performance problems so far, why reinvent your app?
