CSS
공연

변형 및 불투명도를 사용하여 트리거 레이아웃 방지

일부 CSS 속성을 변경하면 스타일 및 레이아웃을 동 기적으로 계산하도록 브라우저가 트리거되므로 60fps로 애니메이션을 적용해야하는 경우에는 좋지 않습니다.

하지 마라.

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

데모는 그림을 위해, 렌더링 9.8ms을 11.7ms했다

해야 할 것

동일한 애니메이션으로 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);
}

데모 같은 애니메이션, 회화, 2.0ms 렌더링에 1.3ms했다.