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

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.