Какие свойства CSS влияют на последний этап отрисовки компонента?

Последний этап отрисовки — композиция (composite): браузер собирает готовые слои в итоговое изображение. На этом этапе работают `transform`, `opacity` и `filter` у элементов на отдельных слоях.

Этапы

1. Style — вычисление стилей.
2. Layout — расчёт размеров и позиций.
3. Paint — рисование пикселей в слоях.
4. Composite — сборка слоёв, часто на GPU.

Что влияет только на композицию

• transform (сдвиг, масштаб, поворот);
• opacity;
• filter и backdrop-filter (если элемент на своём слое).

Их изменение не требует перерасчёта раскладки и перерисовки, поэтому анимации на них плавные.

Создание слоёв

.drawer { will-change: transform; }

will-change заранее выносит элемент на отдельный слой. Злоупотреблять нельзя: каждый слой занимает память видеокарты.

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

Последний этап — composite; на него влияют transform, opacity и filter у элементов на своих слоях, поэтому их и выбирают для анимаций.

Подробнее: web.dev — Stick to compositor-only properties