Почему анимации лучше делать через transform, а не через top и left?

Анимация через `transform` и `opacity` выполняется на композиторе (часто на GPU) и не вызывает пересчёта макета, а изменение top, left, width, margin заставляет браузер выполнять layout на каждом кадре.

Что происходит при изменении свойств

Браузер проходит этапы: Layout → Paint → Composite.

• top, left, width, height, margin меняют геометрию: запускается layout (пересчёт положения соседних элементов), затем paint и composite.
• background, color, box-shadow не меняют геометрию, но требуют paint.
• transform и opacity изменяют только слой: достаточно composite.

Пример

/* дорого: layout на каждом кадре */
.box { transition: left 0.3s; }
.box:hover { left: 100px; }

/* дёшево: только композиция */
.box { transition: transform 0.3s; }
.box:hover { transform: translateX(100px); }

Почему это быстрее

• Элемент выносится в отдельный композитный слой, и браузер двигает готовую текстуру.
• Соседние элементы не пересчитываются.
• Анимация идёт в отдельном потоке и не зависит от занятости основного JavaScript-потока.

Подсказки

• will-change: transform заранее готовит слой, но злоупотреблять им нельзя: слои расходуют память.
• Анимируйте transform: scale() вместо width/height, translate вместо top/left.
• Проверяют результат во вкладке Performance DevTools: ищут лишние Layout и Paint.

Коротко для собеседования

transform и opacity не меняют геометрию и обрабатываются композитором, поэтому анимация плавная. Свойства top, left, width вызывают layout на каждом кадре и нагружают основной поток.