Which property changes during animation are more optimized? transform: translate or top(position: relative)?

Question

Layout

There is a regular block, when hover it moves up a little, and a shadow appears.
Usually I always did it with transform: translate, but now I'm wondering which solution is more optimized. I heard that transform is one of the most expensive properties. Maybe it's better to use offset properties with relative positioning?
Or doesn't matter?

Answer 1

I seem to be confused and vice versa.
1. Layout (layout)
2. Rendering (paint)
3. Composition (composite)
These terms are related to rendering in the browser, but they are important because some CSS properties affect different steps of the rendering pipeline.
If you change a CSS property that doesn't affect layout or rendering, then the browser only has to do the composition.
For details on which processes fire different CSS properties, see CSS Triggers
________________________________________________
article
Starting from the heading Layout, rendering and composition
top property affects all 3 pipeline steps
transform property in some browsers by 3 steps, in others only by 1