75

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?

abernier
  • 27,030
  • 20
  • 83
  • 114
  • after my test in chrome. i found translateX is more faster than translate3d, i feel puzzled [enter image description here](https://i.stack.imgur.com/ZETXZ.png) [enter image description here](https://i.stack.imgur.com/30psT.png) – Nic_Xu May 30 '19 at 03:27

4 Answers4

54

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

Cameron Little
  • 3,487
  • 23
  • 35
  • 41
    That test is bogus, this question is about rendering performance - which isn't tested at all in this jsperf – Niko Sams Mar 30 '15 at 14:19
  • 5
    @abernier no, you can't compare that with jsperf. To compare you could use Timeline of chrome dev tools. – Niko Sams Mar 14 '16 at 07:15
  • 4
    Would love to get some current, hard-data on RENDERING performance since i'm still confused on the real difference between 2D and 3D translates and if converting animations to 3D from 2D is just a micro-optimization. All the articles and resources I find are 3 and 4+ years old. – HaulinOats Jun 09 '17 at 15:27
  • For my case, translate is faster. not __translate3d__ – Lin Du Sep 21 '17 at 03:42
  • This test is bogus because every single version of chrome has wildly different results. Can't trust this at all. A much better test would be to just let me SEE the animations no? – Simon_Weaver Feb 26 '19 at 18:45
37

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)

TimonSeldenrijk
  • 499
  • 1
  • 4
  • 13
  • 1
    What if I want to just translate vertically? I would use translateY() for that. But how can I achieve vertical translation only with translate3d? – Limpuls Dec 08 '19 at 23:41
  • 1
    @Limpuls first of all: you should ask your own question. Secondly: Just set the `y` value of [translate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d) to translate on the vertical axis. `transform: translate3d(0, 42px, 0);` – Florian Dec 11 '19 at 15:46
  • 1
    very likely not true for 2022 browsers – Gabriel Petersson Dec 22 '22 at 20:10
19

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.

brc-dd
  • 10,788
  • 3
  • 47
  • 67
roman
  • 11,143
  • 1
  • 31
  • 42
0

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.

Andrew
  • 198
  • 8