Some CSS properties are much easier for the browser to animate than others. When you animate properties like width, height, top or left, the browser has to recalculate the layout of the page on every frame. On slower devices, that extra work can make the animation stutter.
That’s why most web designers use two properties, transform and opacity, that work differently. The browser can animate them without touching the layout, so they tend to stay smooth even on older phones. So whenever you can, move elements with translate and resize them with scale. For example, to slide a card to the right, animate transform: translateX() and leave left alone.
