CSS
Спектакль

Используйте трансформирование и непрозрачность, чтобы избежать компоновки триггеров

Изменение некоторого атрибута CSS приведет к тому, что браузер будет синхронно вычислять стиль и макет, что плохо, если вам нужно анимировать со скоростью 60 кадров в секунду.

НЕ

Анимация с left и 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;
}

Демонстрация заняла 11,7 м для рендеринга, 9,8 м для рисования

ДЕЛАТЬ

Анимация с transform с той же анимацией.

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

Демонстрация той же анимации, заняла 1,3 мс для рендеринга, 2,0 м для рисования.