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?

Caruthers

possible duplicate of What's the difference between CSS3 translate method and CSS2 relative positioning? – Eudemonism

I know the difference, I want to know their purposes over the other. – Caruthers

There is no translate property. There is a translate function for the transform property which is a matrix transformation, which allows for 2D and 3D manipulation (translate, rotate, skew). – Geostatics

Thanks for grammar advise. ;) – Caruthers

How is this question different from your previous one? – Mercymerdith

Answer 1

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.

Mercymerdith

I did actually do a whole boatload of tests, sofar translation is a real winner. – Caruthers

Answer 2

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/

Beanfeast

the video with paul irish on that post says it all. – Tambour

Link-only answers are frowned upon on SO. If you could summarize how the article enlightened you, it would be appreciated. – Cornhusking

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.

Elam