CODEWITHSUNDEEP
performancecss-transforms
abernier
abernier

Reputation: 28228

translate3d vs translate performance

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() and translate3d()...

Which one is generally faster?

Upvotes: 78

Views: 51061

Answers (4)

Andrew
Andrew

Reputation: 316

TLDR:

The performance differences are generally negligible between each of these.

In Full:

As has been mentioned, translate3d can often push the animation into hardware acceleration which is very useful and can have performance benefits. Whilst this may seem a good thing and suggest you should use translate3d all the time that is not the case. You should only use hardware acceleration when needed. Excessive usage can actually cause performance to worsen.

Ultimately the difference in performance between each of the translate options is pretty much negligible. You should use the one appropriate to your design. If you need a 1D transform, use translateX() or translateY(); if you need a 2D transform, use translate(); and if you need a 3D transform use translate3d(). Doing so will keep your code more readable and maintainable.

If you need to offload an animation to the GPU, do so, but it shouldn't be the default.

Upvotes: 3

roman
roman

Reputation: 11278

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 preferred way of forcing hardware acceleration on page items.

Though in my experience sometimes there is one drawback to using 3d transforms - in certain browser versions/OS combinations (macOS + 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.

Upvotes: 19

Cameron Little
Cameron Little

Reputation: 3721

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

Upvotes: 53

TimonSeldenrijk
TimonSeldenrijk

Reputation: 509

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)

Upvotes: 38

Related Questions