Как лучше делать анимации?

Почему для анимаций лучше transform, а не top / left

Одна из частых ошибок в анимациях интерфейсов — двигать элементы через top, left, right, bottom. Работает, но это плохая идея.

Что происходит при top / left
Когда ты меняешь top или left, браузеру приходится:
1. пересчитать layout
2. пересчитать позиции соседних элементов
3. перерисовать страницу

Это цепочка reflow → repaint → composite.

На простых страницах разницы почти не видно.
Но как только интерфейс становится сложнее, появляются:
• фризы
• дёрганые анимации
• нагрузка на CPU

Что происходит при transform
transform работает иначе.

.element {
transform: translateX(100px);
}

В этом случае браузер:
• не трогает layout
• не пересчитывает соседние элементы
• просто двигает уже отрисованный слой

Фактически это этап composite, часто с использованием GPU.

Результат:
• более плавная анимация
• меньше нагрузки
• стабильный FPS



Простой пример

Плохо:

.element {
  left: 0;
  transition: left 0.3s;
}

.element.active {
  left: 100px;
}

Хорошо:

.element {
  transform: translateX(0);
  transition: transform 0.3s;
}

.element.active {
  transform: translateX(100px);
}

Итог
• top / left ломают производительность
• transform работает на этапе compositing
• браузеры оптимизированы именно под него

#полезнаястатья