Smooth CSS transitions by forcing GPU rendering

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:

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:

(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

发表评论

电子邮件地址不会被公开。 必填项已用*标注