If you’re like me, you get a tickly feeling when working with CSS animations. Just the right sprinkle will spark magic and bring about it committed users.
Well, not always since animation performance can be quite terrible, especially in Chrome. Reaching 60 fps in the browser is hard in general, but there has to be a middle ground between that and complete choppiness. But when does performance start to suffer? Basically, when you’re animating a DOM element that contains lots of child elements.
It goes a bit beyond that, though. Here’s a quote from the official design document regarding compositioning:
Accelerated compositing in WebKit (and Chromium) kicks in only if certain types of content appear on the page. An easy trick to force a page to switch over to the compositor is to supply a -webkit-transform:translateZ(0) for an element in the page.
So without further ado, the trick is to apply either a -webkit-transform-translateZ(0); or a -webkit-transform-translate3d(0, 0, 0); declaration to the CSS belonging to the DOM element in question. Doing so will improve the animation performance in Chrome.