CSS
Prestanda

Använd transform och opacitet för att undvika trigglayout

Att ändra vissa CSS-attribut leder till att webbläsaren synkront beräknar stil och layout, vilket är en dålig sak när du behöver animera på 60 fps.

DO NOT

Animera med left och top triggerlayout.

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

Demo tog 11,7ms för rendering, 9,8ms för målning

DO

Animera med transform med samma animation.

#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 samma animation, tog 1,3 ms för rendering, 2,0ms för målning.