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

Unfortunately this is limited by a number of things, many which you cannot control:

• Browser performance - all browsers behave differently with CSS3 and Javascript. I have found Safari to be among the best (surprisingly?) in terms of CSS3 rendering performance, with Chrome in second and Firefox in 3rd.
• GPU performance - Some browsers now offload animation & transition operations to the GPU, in which case the speed / performance is limited by the GPU. If you're on an Integrated Intel GPU, it's not likely to be very smooth compared with a discrete NVIDIA or AMD graphics card.
• CPU performance - For situations where browsers do NOT offload to GPU, the CPU is used in which case your CPU becomes the bottleneck.
• Number of other tabs / windows open - many browsers share processes across tabs, and other animations or CPU-consuming operations happening in other tabs / browsers could create performance degredation.

The best way to improve performance currently is to limit the number of things that are being animated / transitioned all at once.