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を取りました。