Let’s say you have a CSS transition that takes an element and scales it two times on mouseover. Your code probably looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #scaled-thing { -webkit-transition:all 1s linear; -moz-transition:all 1s linear; -ms-transition:all 1s linear; -o-transition:all 1s linear; transition:all 1s linear; } #scaled-thing:hover { -webkit-transform:scale(2.0); -moz-transform:scale(2.0); -ms-transform:scale(2.0); -o-transform:scale(2.0); transform:scale(2.0); } |
It’s all good in the hood until you have a really complex DOM with a lot of things going on – then things usually get choppy and slow in older WebKits. That’s because your browser takes your 2D transition and forces it through your CPU. What to do in order to make it smooth?
Fortunately, there’s an extremely simple hack that allows you force the browser to enable GPU rendering for CSS transitions – just take your code and tell the browser it’s actually a 3D transition even though it isn’t. The code after the change would look something like that:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #scaled-thing { -webkit-transform:translateZ(0); -webkit-transition:all 1s linear; -moz-transition:all 1s linear; -ms-transition:all 1s linear; -o-transition:all 1s linear; transition:all 1s linear; } #scaled-thing:hover { -webkit-transform:scale(2.0); -moz-transform:scale(2.0); -ms-transform:scale(2.0); -o-transform:scale(2.0); transform:scale(2.0); } |
(See this example on JSfiddle)
It has its drawbacks, of course – the screen might blink or lose colour profile when starting transition, but hey – hacks aren’t called so without a reason 🙂
转载，来自：http://blog.lunarlogicpolska.com/2013/force-gpu-powered-css-transitions-in-webkit/
by MARIUSZ CIEŚLA on FEBRUARY 18, 2013