Why use translateZ or translate3D in animations made with CSS? Hardware-accelerated animations in CSS?

Question

Nowadays it is quite common to see even in the most simple animation effects websites made with CSS, both with transition as to @keyframes And one thing that has struck me is that several of these animations use artifices to force an acceleration by hardware setanto values like:

.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 the eixo Z, even without value (0), to enable hardware acceleration using the GPU to process the animation. But knowing that Chrome for example is a notorious memory consumer has arisen some doubts...

My doubts are linked to UX and Performance:

• What is the use of this type of artifice and how it affects the animations? This brings some advantage to the user?
• Would animating something that would be a 2D with 3D properties not increase the system’s battery and memory consumption for example? What is the impact of this on mobile devices that usually have the most limited hardware?
• If I have several animations on the page I should use this in all of them or there is some good practice with regard to this?