I’ve tried various tests in Safari and Chrome but I don’t actually see any difference. I thought that CSS Transitions were supposed to be hardware accelerated.
I’ve tried using Scriptaculous’
Effect.Fadeon 5 different DIVs (each containing a canvas with some lines). Doing the exact same thing using CSS transitions, I see absolutely no difference in performance. Both were very smooth with one DIV/Canvas, but both are very slow when I do more than 2 at a time.
I’ve tried this in Safari 4, 5 (OSX), Google Chrome 5 and FireFox 3.7pre. Same results across the board.
In answer to UpHelix’s response, you’re not simply limited to
hover, etc. You can trigger a transition by changing any
transitionDurationfor that element).
Yes, there is a difference, CSS is much faster. It may be difficult to see until you get many running at the same time or the more they do. CSS animations are limited though. In most cases they really only work off the