jQuery animate (and any JS animation) iterates over CSS properties by updating an elements style attribute. Updating the DOM at this rate forces repaint/reflows

jQuery animate (and any JS animation) iterates over CSS properties by updating an elements style attribute. Updating the DOM at this rate forces repaint/reflows and is rarely going to perform well. CSS transitions/transforms let the browser render once on separate layers. The animation frames can then be composited faster (and accelerated on the GPU). Paul Irish has a great demo: http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ http://paulirish.com/2012/why-moving-elements-with-translate...