Question

Does anyone have cheats or tips for how to improve the smoothness of CSS3 animation? I’m sliding the entire page to the left using a css transition and it’s a bit more juttery than I’d like. It’s a single element but it contains numerous rounded corners, gradients, drop shadows, etc as it’s a complicated page.

In flash actionscript, there is a handy property cacheAsBitmap which converts the animating element into a bitmap before the animation begins. This is a godsend and significantly speeds up certain types of animation. Is there anything like this for CSS? Are there any other tips out there to improve performance without simplifying the page design? I’m thinking things like enabling hardware acceleration or flagging the animation as high priority for the browser.

Answer 1

Before the will-change directive, you couldn’t do this in the same literal way that you can in other languages. The browser (or at least Webkit) dealt with rendering the page by drawing various layers. It should in theory be intelligent enough to work out the layers for you, but sometimes it was a good idea to force something into its own layer.

Sometimes that worked, sometimes it didn’t, depending on exactly what’s going on.

Anyway.

In CSS, one way to force something into a layer is to transform it using a 3D transform. A common strategy is to add either:

transform: translateZ(0);

or the equivalent:

transform: translate3d(0,0,0);

or the slightly crazy:

transform: rotateZ(360deg);

or the translate ones combined with:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

if things are flickery.

These create a new layer as that’s what the spec defines. From http://www.w3.org/TR/css3-transforms/#transform-property,

“Any value other than ‘none’ for the transform results in the creation
of both a stacking context and a containing block.”

These all need careful testing, and aren’t something to just always bung on anything that might need it – sometimes it’s better, sometimes it’s no different, and sometimes it’s worse!

Good luck!