Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.

css3.bradshawenterprises.com

Post reply on HN
Print view View original

21–26 of 26 posts

Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.

#21

Post by richbradshaw »

mcot2 wrote: post #19

Why is everyone missing this? JQuery is a library that provides a consistent API across browsers. In a future release couldn't they detect CSS3 animation support and update the animate function to use them if supported? Some projects are already doing this: http://www.benbarnett.net/2010/09/01/enhancing-jquerys-anima... Sounds like it should go into mainline jquery pretty soon.

Exactly - hopefully this will happen one day. Having used that plugin though it doesn't work perfectly on all code (jQuery Cycle + that for instance doesn't always work as expected). Any mention of transitions seems to result in a wontfix if you check through the jQuery bug tracker.

Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.

#22

Post by mcot2 »

richbradshaw wrote: post #21
mcot2 wrote: post #19

Why is everyone missing this? JQuery is a library that provides a consistent API across browsers. In a future release couldn't they detect CSS3 animation support and update the animate function to use them if supported? Some projects are already doing this: http://www.benbarnett.net/2010/09/01/enhancing-jquerys-anima... Sounds like it should go into mainline jquery pretty soon.

Exactly - hopefully this will happen one day. Having used that plugin though it doesn't work perfectly on all code (jQuery Cycle + that for instance doesn't always work as expected). Any mention of transitions seems to result in a wontfix if you check through the jQuery bug tracker.

I suspect what is holding it up is both browser support and the time required to get it right. Maybe they don't use animate but provide a separate wrapper.

Keep in mind, the specs are rather large. When people talk about CSS "animations" there really talking about at least 3 specs, maybe 4. CSS 2D transforms, CSS 3D transforms, CSS transitions and CSS animation. There is a lot of work to get it right and tested in a nice JS wrapper, not to mention making it work with an existing JS based API.

Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.

#23

Post by mcot2 »

pedalpete wrote: post #11

I'd like to see a comparison between CSS3 and html5 canvas performance, as for a simple animation in this example, I think Canvas may be more applicable.

I actually want to know more about SVG than canvas. Since SVG already has the concept of translate, scale, ect... built in, are these hardware accelerated like CSS3 animations for DOM nodes?

Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.

#24

Post by duopixel »

mbostock wrote: post #12

I did this same experiment with D3 (animating the outline-color and background-color for 1s with ease-in-out), and I got performance nearly identical to CSS. http://bl.ocks.org/d/1616423/ A lot of this gain is likely from using requestAnimationFrame, but there could be other optimizations in D3, such as a single timer loop for all transitions. So, I think it's misleading to say you can't do fast transitions in JavaSc…

Raphael also suffers when animating many elements, here is a question I answered about a week ago on StackOverflow and I ended up solving with d3.js:

http://stackoverflow.com/questions/8239235/smoothly-animate-...

But recently I went through Raphael's source an I saw an implementation on requestAnimationFrame, perhaps Mike can shed some light on what is different. Great work on d3.js by the way!

Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.

#25

Post by Michiel »

richbradshaw wrote: post #15
Achshar wrote: post #13

maybe i am not getting something here but isn't this obvious? native c++ will be faster than javascript (which also compiles to c++ (i believe?) but does not have hardware acceleration and is single threaded [in case of jquery atleast]). Libraries (like jquery) were made to fill in the gaps that css or js had. now that the gaps are filling up, jquery becomes a redundancy (atleast for basic animations like that of css…

This is part of a tutorial, the idea was to give some evidence for justifying the use of transitions where possible. It also might get more people to realise that jQuery isn't the answer to everything, and animation is definitely not one of it's strong points (right now anyway!)

So why doesn't jQuery help me be smart and do CSS transitions where available? Or would it be to difficult to translate my JavaScript animation instructions to CSS animations?

Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.

#26

Post by pixel4 »

Sure, native tweening is fast and great, but don't show it by performing a false comparison.

The CSS transition is performing a single tween on a CSS rule; the div tags just inherit the result. The jQuery test is performing inline style tweens ... on every div! First of all you're performing redundant/duplicate calculations. Second of all, you're throwing away all performance gains you had by having shared css render style objects.

A better test would of been to update the style sheet via JS.

Post reply on HN