CSS vs. JS Animation: Which is Faster? by David Walsh
CSS vs. JS Animation: Which is Faster?
CSS transitions vs JavaScript animation (RAF)
Reasons why (well written) JavaScript animation can be faster than CSS transitions:
- CSS transitions uses hardware accelerations - it can in fact create stuttering and banding especially on mobile devices. This is because of the overhead of transferring data between the browser's main thread and the compositor thread. Transforms and opacity are not effected by this.
- With CSS transitions are only triggered but not synced with the JavaScript program
How JavaScript can do further optimisations that CSS cannot do:
- Synchronise the DOM - minimise layout trashing (by tweeting the stack, batch calculations, visual updates)
- Caching property values - especially important when you minimise DOM querying, this is what slows down the most animations
- Caching unit conversions (and other calculations) across multiple DOM elements
- Skipping style updates when it would be visually imperceptible
Velocity.js
It's a great, small, focused library to easily the above best practices. Usage is almost identical to jQuery
animate. It also adds color animation, transforms, loops, easing, class animation and scrolling.