3 ms·
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. h
by mbostock 15y ago
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/ 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 JavaScript. It might just be a need to optimize jQuery.
But still, I definitely prefer to use CSS transitions when possible, because the performance is generally better and I like the declarative syntax.
- richbradshaw 15y agoThat is much better than the jQuery version - particularly the use of requestAnimationFrame. It still has almost a second of Recalculate Style before the animation, but the animation at least manages to get some frames in. I'm hoping that if nothing else this post prompts the jQuery team to have a look at their animation function.
- duopixel 15y agoRaphael 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-attribute-changes-to-3000-raphael-objects-at-once/8731150#8731150 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!