CSS
Prestazione

Usa la trasformazione e l'opacità per evitare il layout del trigger

La modifica di alcuni attributi CSS fa sì che il browser calcoli in modo sincrono lo stile e il layout, il che è un aspetto negativo quando è necessario animare a 60 fps.

NON

Animazione con layout di trigger left e top .

#box {
  left: 0;
  top: 0;
  transition: left 0.5s, top 0.5s;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;
}

#box.active {
  left: 100px;
  top: 100px;
}

La demo ha preso 11.7ms per il rendering, 9.8ms per la pittura

FARE

Animare con transform con la stessa animazione.

#box {
  left: 0;
  top: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;

  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}

#box.active {
  transform: translate3d(100px, 100px, 0);
}

Demo stessa animazione, ha preso 1,3 ms per il rendering, 2,0 ms per la pittura.