Considerations for CSS3 Transition Performance

Question

As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty

Answer 1

Chrome has recently improved the 2D transition performance, and now this trick is no longer needed. The best thing is that if removed the translate3d you'll no longer have those z-index problems! Use the test to prove. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

Answer 2

also you can try will-change: transform; , read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility

Answer 3

I think it quite old already but for anyone who still needs tricks to improve the transition performance on mobile device, you can apply : -webkit-transform: translateZ(0); to the element you are animating. This trick is according to this blog : http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/. I have tried and it works quite well.

Answer 4

You have to be careful with this, as it can alter the z-index of the element it's applied to, but adding:

-webkit-transform-style: preserve-3d;

To the element you're applying the transition to, can speed animation up considerably, as it forces the hardware to use hardware acceleration for the animation.

If you do encounter layout bugs, you can just switch your 2d transitions to 3d values, so:

-webkit-transform: translate(100px, 100px)

becomes:

-webkit-transform: translate3d(100px, 100px, 0px)

You can see a demo of how this helps speed things up, at http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

If after applying this to the element, you see it or elements around it blink upon use, then use:

-webkit-backface-visibility: hidden;

To the element, and that should correct the problem.

These tips have helped me to produce fast, efficient CSS transitions, hope they help. :)