CODEWITHSUNDEEP
google-chromecsswebkit
Caleb Hearon
Caleb Hearon

Reputation: 256

CSS transitions, animations have terrible performance, behavior

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.

Upvotes: 6

Views: 6815

Answers (4)

methodofaction
methodofaction

Reputation: 72445

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

Upvotes: 2

Rich Bradshaw
Rich Bradshaw

Reputation: 73045

I'm using Chrome 17 on OSX, and it seems fine - runs at around 20-30fps, no dipping or graphical issues. I suspect that this is just an issue with older Chrome builds.

Upvotes: 2

Cesar Canassa
Cesar Canassa

Reputation: 20243

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.

Upvotes: 4

Michael Mullany
Michael Mullany

Reputation: 31800

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.

Upvotes: 3

Related Questions