In a recent discussion by David Walsh, he mentions the potential for hardware acceleration through the use of the translate3d property in CSS.
Here's how it operates:
.animClass {
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
/* additional animation properties can be included here */
}
I am currently debating whether or not to implement this technique. My website has numerous transitions, although they do not occur simultaneously. I aim to provide a seamless experience across all devices, including older models and high-performance ones.
Therefore, my inquiries are as follows:
- Does utilizing the above technique enhance the performance of transitions like opacity, width, and positioning? And should the mentioned properties be incorporated?
- How universally compatible is this approach? While IE8 and earlier versions are not a concern, I am particularly interested in its effectiveness on mobile platforms such as Android, iOS, and Windows Phone. What adjustments need to be made for broader compatibility?
- Is it necessary to apply the hardware-enabling code to every element with a transition property? If so, can it be simplified into a SASS mixin for easier implementation?