Почему для анимаций лучше использовать transform и transition вместо position absolute в CSS?

Что проверяют

Знаете ли вы конвейер рендеринга браузера: стиль, компоновка, отрисовка, композиция. Вопрос сформулирован неточно, анимируют не position, а top и left у позиционированного элемента, и хороший ответ начинается с этого уточнения.

Как отвечать

Разница в том, сколько стадий конвейера запускает изменение свойства на каждом кадре:

• top, left, width, margin меняют геометрию, поэтому браузер пересчитывает компоновку для элемента и его окружения, затем перерисовывает и только потом собирает кадр. При шестидесяти кадрах в секунду на всё это есть около шестнадцати миллисекунд, и на глубоком дереве бюджет кончается;
• transform и opacity компоновку не трогают вовсе. Если элемент вынесен на отдельный слой композиции, кадр собирается сдвигом готовой текстуры, часто без участия основного потока.

.card {
  transition: transform 200ms ease-out;
}
.card:hover {
  transform: translateX(8px);
}

transition сам по себе производительности не добавляет, он лишь описывает, как значение меняется во времени. Выигрыш даёт выбранное свойство.

Добавьте про цену: слой создаётся не бесплатно, will-change: transform на десятках элементов съедает видеопамять, поэтому его ставят точечно и снимают после анимации. Проверяется всё во вкладке производительности: в кадре видно, появляются ли стадии компоновки и отрисовки.

Где спотыкаются

Говорят, что transform всегда считается на видеокарте. Отдельный слой создаётся при определённых условиях, и непромотированный элемент анимируется в основном потоке, просто без пересчёта компоновки.

Второе: называют position: absolute причиной тормозов. Абсолютное позиционирование, наоборот, сокращает область пересчёта, потому что элемент выпадает из потока. Дорого обходится изменение его координат на каждом кадре.

Третье: анимируют через transform, но в том же кадре читают offsetWidth или getBoundingClientRect. Чтение геометрии заставляет браузер посчитать компоновку немедленно, и весь выигрыш пропадает вместе с плавностью.