Animating top or left makes the browser recompute layout on every frame, then repaint, then composite. Animating transform skips the first two — the element is already painted and only its position on the compositor changes.
/* layout on every frame */
.panel { transition: left 200ms; }
.panel.open { left: 0; }
/* composite only */
.panel { transition: transform 200ms; }
.panel.open { transform: translateX(0); }The same distinction applies to opacity, which composites, versus background-color, which repaints, and to width versus scale. On a desktop the difference is invisible; on a mid-range phone it is the difference between sixty frames and twenty. The devtools timeline shows which of the three stages each frame is spending its time in, and that is the measurement worth taking before optimising.