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, manually multiplying translate values by the scale factor. Alternatively, using separate scale and translate properties ensures proper order. The article also explains why adding rotate(0) accidentally fixes the issue by forcing matrix interpolation.