Enabling hardware acceleration: translate3d

Question

As David Walsh briefly discusses, it is possible to force hardware acceleration with a zero-based translate3d property in CSS.

It works like this:

.animClass {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;

    /* more specific animation properties here */
}

I'm still not convinced whether I should start using this technique. I am using many transitions on my responsive website, though none will run simultaneously, and I am hoping to deliver a smooth experience to older devices as well as high-performance ones.

My questions, then, are:

1. Does the technique above improve the execution of transitions such as opacity, width and position (left, right, top, bottom)? And should the above properties.
2. How cross-browser is this? I'm not interested in IE8 and lower, but especially mobile Android, iOS and Windows Phone devices ought to benefit from this. What code is there to be added for more compatibility?
3. Should the hardware-enabling code be added to every element that has the transition property? If so, is there a way to right it into a simple SASS mixin that can be used easily?

Answer 1

An hint to the third part:

You should keep in mind that browsers already optimize the layout and design animations. Forcing hardware acceleration to each animated element is counter-productive as you cancel any browser optimizations with this. You should always use proper tools to measure your websites rendering performance before even thinking about using such hacks.

In short: browsers are getting smarter and smarter with each new version and you – as a single person – can't be more clever than a whole bunch of developers who sometimes work for years on a rendering engine.