Animating zooming using CSS: transform order is important… sometimes

CSS transform animations can produce unexpected 'swooping' effects when using scale followed by translate due to how the browser interpolates transform values. The scale acts as a multiplier for translate values during animation, causing non-linear movement. The solution is to reorder transforms as translate first, then scale, Show more