CSS transitions, animations have terrible performance, behavior

cssgoogle-chromewebkit

I'm working on a page turn animation. The performance is disappointing. Particularly if you take the pages class and make it something like 800px wide (paste $('.pages').css({width: '960px', height: '600px'}); into your console). I used to have around 16 transitions running at once and reduced it to 9, many of which are transforms! I don't know what else I can do.

Chrome does not seem to be using the GPU. It spikes the FPS on initial page turn but then dips down at regular intervals (enabled this with about:flags):

Chrome showing FPS dips

Try it out in Safari and you will get better performance but see that the animations do not sync up, often lag behind each other, and there's a weird wobblyness that Román Cortés's project also suffered from in the same browser (I haven't made it work in Fx yet).

There hasn't been much good material about how to optimize CSS transitions and animations on the web and I've been mostly teaching myself. I was hoping someone would have this kind of advice.

Best Answer

In order to take advantage of the GPU you have to use translate3d(x,y,z) instead of translate(x,y) in your -webkit-tranform's. This will force Chrome to use the GPU to render the animations.

Beware that while the performance will greatly increase if the computer has a good video card, it will also degrade on a slower hardware.

Related Topic