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 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!

Answer 2

Since

• Chrome 36
• Firefox 38
• Opera 30
• Android Browser 40
• Chrome for Android 42

you can use will-change to inform the browser to prepare for hardware accelerating elements.

.drawer {     will-change: transform; } 

The will-change property allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element, so that it can set up the appropriate optimizations before they’re needed, therefore avoiding a non-trivial start-up cost which can have a negative effect on the responsiveness of a page. The elements can be changed and rendered faster, and the page will be able to update snappily, resulting in a smoother experience.

For more information, you can read the full article of that quote.