Why this matters
The production reason.
Animating width, height, top, or left can force layout recalculation on every frame. That gets rough in lists, dashboards, and repeated UI.
Transform and opacity are easier for browsers to composite smoothly, so hover states, menus, sheets, and notification stacks feel cleaner.
For production UI, animate the layer, not the document flow. Reserve the final space first, then move or fade the element inside it.
Copy-ready example
.menu {
opacity: 0;
transform: translateY(8px) scale(0.98);
transition: opacity 180ms ease, transform 180ms ease;
}
.menu[data-open="true"] {
opacity: 1;
transform: translateY(0) scale(1);
}