Improving CSS3 transition performance

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 jut

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!