translate3d vs translate performance

后端 未结 3 429
遥遥无期
遥遥无期 2021-01-31 07:24

We now all know, particularly from that nice article, that we should prefer css-transforms to animate position.

But we got the choice between translate() an

相关标签:
3条回答
  • 2021-01-31 07:35

    This site below runs tests comparing translate(), translate3d(), and a couple other properties. According to it, translate3d() is faster in most browsers.

    http://jsperf.com/translate3d-vs-xy

    0 讨论(0)
  • 2021-01-31 07:39

    The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! So 'T3d' is just better because it tells the CSS animations to push the animations in 3d power! That's why it is faster. (The answer of Cameron Little is the proof)

    0 讨论(0)
  • 2021-01-31 07:49

    As cameron suggested translate3d should be faster in a lot of browsers, mostly those that use gfx hardware acceleration to speed up rendering. especially on webkit translate3d was the prefered way of forcing hardware acceleration on page items.

    though in mit experience sometimes there is one drawback to using 3d transforms - in certain browser-versions/os combinations (osx+safari i'm looking at you) hardware accelerated rendering can slightly alter font smoothing as well as interpolation thus causing minor flicker or blur. those situations can mostly be worked around but should be kept in mind.

    0 讨论(0)
提交回复
热议问题