By that time, jQuery was used for many purposes and one of them was animating objects on webpages. It worked quite well (and still do), however with CSS3 being supported by every modern browser, we would be foulish not to use it.
I’ll make the point concise and simple: using jQuery’s
Instead one should use CSS transition and animation properties. Besides being more appropriate for this task from the logical point of view (we’re modifying the way how things look) it allows the browser to optimize it on its own and delegate part of processing to the GPU.
According to the csstriggers.com, properties that can be transformed with as little effort for the browser as possible are:
and most imporantly
width triggers the paint event which causes additional work to be performed by the CPU. Therefore, i.e. modifying
transform: translate(x,y) instead of
top: y; left: x; pair will result in slightly smoother animation.
I don’t want to elaborate much on that topic. However if you don’t trust my word, Paul Irish made a great blogpost where he digs into it in great detail. I can highly reccomend reading it if you want to know what happens under the hood.
If you’ve been reading this far, I’m sorry to disappoint you. In majority of cases, your animations will look almost the same as long as you avoid jQuery and use CSS to perform them…
…along with a desktop browser. Your CPU will manage to calculate everything on time and reach the magical 60FPS.
The thing is, avoiding unnecessary paint events can make a difference while using mobile devices such as smartphones, which have limited processing capabilities. A computer with a little over 1MHz was enough to get Apollo 11 to the moon. I don’t want to see my mobile stumble over a dropdown menu.