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

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/

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.