CSS transitions, animations have terrible performance, behavior

Question

I am working on page rotation animation . The performance is disappointing. In particular, if you take the pages class and make it approximately 800px in size (insert $('.pages').css({width: '960px', height: '600px'}); in the console). I used to have about 16 transitions, and I reduced them to 9, many of which are transformations! I do not know what else I can do.

Chrome does not seem to use a GPU. It splashes FPS on the initial page turn, but then drops off at regular intervals (this is enabled with about:flags ):

Try it in Safari and you will get better performance, but you will see that the animations do not synchronize, often lag behind each other, and there is a strange elusiveness that the Román Cortés Project also suffered from in the same browser (so far I have not worked in Fx).

There wasn’t much good material on how to optimize CSS transitions and animations on the Internet, and I mainly taught myself. I was hoping someone would have such advice.

Answer 1

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

Remember that although performance will increase significantly if your computer has a good graphics card, it will also degrade on slower hardware.

Answer 2

Here is the flip page that I made for our launch of Sencha Animator. He is also inspired by the original Ramon Cortes, but uses different mechanisms - as far as I remember. It's super smooth on Safari and on iOS, but kinda jerky on the Chrome desktop. However, I have not tested it on Android 4.

Answer 3

I use Chrome 17 on OSX, and it seems great - it works at a speed of about 20-30 frames per second, without dipping or graphic problems. I suspect this is only a problem with older Chrome builds.

Answer 4

Animating box-shadows and -webkit-gradients is very expensive, try temporarily removing them to see if performance improves. If so, see what you can do to replace them with images.