translate() is a possible value of the CSS
transform property. When using
translate(), the element still occupies its original space (sort of like
position: relative). But when changing the absolute positioning of elements, the elements are removed from the flow of the page and the positioning of the surrounding elements will be affected. Hence the page layout will have to be recalculated.
opacity does not trigger browser reflows or repaints but does trigger compositions; On the other hand, changing the absolute positioning triggers
transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence
translate() is more efficient and will result in shorter paint times for smoother animations.