CSS
Actuación

Utilice la transformación y la opacidad para evitar el diseño de disparo

Cambiar algún atributo de CSS activará el navegador para que calcule el estilo y el diseño de forma sincrónica, lo cual es algo malo cuando necesitas animar a 60 fps.

NO HACER

Animar con diseño de gatillo left y 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 tomó 11.7ms para renderizar, 9.8ms para pintar.

HACER

Animar con transform con la misma animación.

#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);
}

Demostración de la misma animación, tardó 1.3ms en renderizar, 2.0ms en pintar.