CSS transitions, animations have terrible performance, behavior

Question

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):

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.

Answer 1

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.

Answer 2

Here's a page flip I did for our launch of Sencha Animator. It's also inspired by Ramon Cortes' original, but uses different mechanisms - as far I as remember. It's super smooth in Safari and on iOS, but kind of jerky on Chrome desktop. Haven't checked it in Android 4 yet though.