Почему для анимации transform предпочтительнее top/left?

Question

Accepted Answer

## Практический смысл

Анимация `top`/`left` часто трогает **layout**; `transform` обычно остаётся на этапе **composite** и может идти на GPU-слое.

## Почему так

Изменение `top`/`left` (и `width`/`margin`) заставляет браузер пересчитывать геометрию и часто paint соседей. `transform: translate()` сдвигает уже свёрстанный слой без пересчёта потока.

```css
/* тяжелее при частых кадрах */
.bad { transition: left 300ms; left: 0; }
.bad:hover { left: 40px; }

/* обычно дешевле */
.good { transition: transform 300ms; }
.good:hover { transform: translateX(40px); }
```

То же для `opacity` vs смена `visibility`/`display`. Не значит, что `top` «запрещён» — для разовых перестроек ок; для 60fps-жестов — `transform`/`opacity`.

## Итог

Для плавных UI-анимаций — `transform` + `opacity`. `top`/`left` анимируют геометрию и чаще дороже.