Nowadays it is very common to see even the simplest animation effects made with CSS, both with transition and with @keyframes , and something that has caught my attention is that several of these animations use artifacts to force a acceleration by hardware setanto values as:
.anima {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
It is also common to see transform: translate3d(0, 0, 0) or even transform: rotateZ(360deg) to somehow use eixo Z , even if no value (0), to enable hardware acceleration using the GPU to render the animation. But knowing that Chrome for example is a notorious consumer of memory have come some doubts ...
My questions are linked to UX and Performance:
- What is the purpose of this type of artifice and how does it affect animations? Does this bring some benefit to the user?
- Animating something that would be a 2D with 3D properties would not increase the consumption of battery and system memory for example? What impact does this have on mobile devices that usually have the most limited hardware?
- If I have multiple animations on the page should I use this in all of them, or is there any good practice with respect to this?