Какие свойства в CSS лучше не анимировать?

Не стоит анимировать свойства, которые заставляют браузер пересчитывать раскладку (layout) или перерисовывать большие области на каждом кадре.

Дорогие свойства

• Влияют на раскладку: width, height, top, left, margin, padding, font-size, border-width. Изменение запускает layout → paint → composite, часто для соседей тоже.
• Требуют перерисовки: box-shadow, filter: blur(), background, border-radius на больших элементах.

Чем заменить

/* плохо: пересчёт раскладки на каждом кадре */
.panel { transition: left 300ms; }

/* хорошо: только композиция */
.panel { transition: transform 300ms; }
.panel.open { transform: translateX(0); }

• движение — transform: translate();
• изменение размера — transform: scale();
• появление — opacity;
• тень — анимировать opacity у псевдоэлемента с готовой тенью.

Как проверить

DevTools → Performance: длинные фиолетовые (Layout) и зелёные (Paint) участки во время анимации — сигнал проблемы.

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

Не анимируют свойства, вызывающие layout и paint (размеры, позиции, отступы, тени); вместо них — transform и opacity.

Подробнее: web.dev — Высокопроизводительные анимации