What is the CSS transform:translate() property ultimately for?

Question

In CSS3, animations were introduced under the various vendor prefixes, with the transition properties. Now, at-least in pure CSS there are two ways to make an element change position.

1. Setting the element's position as absolute and fiddle with left: right: top: and bottom:
2. Using -vendor-transform:translate(X,Y,Z)

Now, strictly on the point of transform:translate(), aside from one's ability to use translateZ(), the only difference between them is that the latter is not a reported value; other than parsing the property itself the translation is not computed style. However, if this was not necessary, is the latter actually the better choice for animation and positioning elements that are otherwise in a position:fixed configuration?

Im particularly interested in making a quite heavy webapp that needs to run on mobile devices as well as browsers so as a result backwards compatibility is not so much an issue. Mobile browsers these days tend to be at-least 'modern.'

So ultimately, my question is, what exactly is transform:translate() for, according to the makers of CSS3's spec? Where was it built to be used over LRTB transforms, and would it be possible to make use of it in a way that is appreciably superior for the sake of render speed, animation smoothness, and visual stability when hardware acceleration (-webkit-transform: translateZ(0);) is employed? For those who don't know, sometimes in webkit elements can flicker in hardware accelerated environments.

In any case, I'm just looking for the best and most up to date layout solutions for my web-apps that can leverage CPU and GPU most effectively so they can run at very well optimized FPS (as far as transitions and, in some cases, scrolling are concerned) A great example of the type of smoothness that would be most desirable is this http://www.webkit.org/blog-files/leaves/ (yes, I did read its source.)

Any input?

Answer 1

I know that this is an older post, but I found this article very helpful when wondering this same question:

http://css-tricks.com/tale-of-animation-performance/

Answer 2

what exactly is transform:translate() for, according to the makers of CSS3's spec?

It says:

For backwards compatibility with existing SVG content, this specification supports all transform functions defined by The ‘transform’ attribute in [SVG11].

As for the other parts of your question, not sure if it's possible to give a general answer.

I think it's best to run some performance test for your particular situation. That shouldn't be hard to do if your app is well-designed. Also, such design may allow for per-device optimization, where translations and offsets are used respectively.

Answer 3

Not sure why this hasn't been answered yet, but the translate property does not cause CLS (Content Layout Shift). In other words when a page load, or the viewport changes, the content with CLS will be somewhat static. Nowadays, a webapp will be penalized for performance from Google's lighthouse.