transform vs top/left

Definition

Animer avec transform (translate, scale, rotate) utilise le GPU et évite le reflow, contrairement à top/left qui déclenche un recalcul de layout coûteux à chaque frame.

Analogie

Comme glisser une photo sur un bureau (transform) vs déplacer tous les meubles pour faire de la place (top/left).

Exemple de code

/* BON : animé par le GPU, 60fps */
.element {
  transition: transform 0.3s;
}
.element:hover { transform: translateX(100px); }

/* MAUVAIS : déclenche reflow à chaque frame */
.element:hover { left: 100px; }

Cas d'usage

Toute animation de position, taille ou rotation pour garantir 60fps sans janking.

Anti-pattern

Termes lies