jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
css3.bradshawenterprises.com
jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
1–10 of 26 posts
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#2Also, I'd really appreciate some help in explaining the discrepancy here. I've had a go at the bottom of the page, but if anyone has any input I'd be keen to get it as correct as possible.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#3Very interesting analysis. However the factor that prohibits one from using css3 transitions is browser support. Of course, one could always have jQuery used for older browsers and but keep it right for the new ones.
Probably you could be dive a little deeper to get some more empirical data with browser/device specificity. It'd help designers and developers to share responsibilities in a better way.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#4Not a very good example. For me the CSS3 version isn't smooth either (in chrome). And generally the transition should be more eye-catching to make your point.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#5Not a very good example. For me the CSS3 version isn't smooth either (in chrome). And generally the transition should be more eye-catching to make your point.
I'm in chrome on an air, and the difference is very clear. Probably hard to come up with something that'll work for everyone...if he exaggerates it too much, it'll risk blowing up phones!
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#6there is a wrapper that 'emulates' jquery animate calls using css3 when available. its the best of both worlds, allowing you to code once using jquery and when the user's browser supports it automatically creates the css3 needed and runs it.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#7Also, I'd really appreciate some help in explaining the discrepancy here. I've had a go at the bottom of the page, but if anyone has any input I'd be keen to get it as correct as possible.
Agreed, the analysis doesn't make things too clear. If you look at the code, all the CSS element does is add a class to the containing div. The jquery version has to animate each square.
From his explanation, browsers are smart enough to not only batch (how I'm thinking of it) css animations to all elements, but they also know what part of the screen will change and only have to redraw that.
The jQuery one just spends too much resources changing the properties of all those boxes to have any time to actually redraw the screen.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#8My apologies if I come across the wrong way, but this doesn't take an article to explain.
CSS3 transitions and keyframes are hardware accelerated and in most cases native to the browser.
Doing anything with javascript and the DOM is single threaded and expensive.
If you are using jQuery, look at cssHooks for nice fallbacks to js animations if you feature detect for particular effects.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#9Also, I'd really appreciate some help in explaining the discrepancy here. I've had a go at the bottom of the page, but if anyone has any input I'd be keen to get it as correct as possible.
Agreed, the analysis doesn't make things too clear. If you look at the code, all the CSS element does is add a class to the containing div. The jquery version has to animate each square. From his explanation, browsers are smart enough to not only batch (how I'm thinking of it) css animations to all elements, but they also know what part of the screen will change and only have to redraw that. The jQuery one just spend…
The selector is applied to all the boxes, not just the outside one. The point here is that jQuery doesn't work well for doing lots at once really.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#10My apologies if I come across the wrong way, but this doesn't take an article to explain. CSS3 transitions and keyframes are hardware accelerated and in most cases native to the browser. Doing anything with javascript and the DOM is single threaded and expensive. If you are using jQuery, look at cssHooks for nice fallbacks to js animations if you feature detect for particular effects.
I agree - this is part of a tutorial, and these examples are really to prove this point.
Animations using javascript were great when we didn't have anything else, but nowadays they should only be used in browsers without support.
What would be really cool would be a DOM method that tied into the animation code that powers transitions.