【css】ブラウザのレンダリングを考慮したtranformの記述

アニメーションを実現するにはleftやrightといった記述もできるが、ブラウザのレンダリング処理への影響を考慮すると、transformプロパティを使うのが望ましい。transformプロパティを利用した方がブラウザのパフォーマンスが上がる。

非推奨

leftやrightプロパティ（レイアウトプロパティ）を使った例。
レンダリングに対する計算量が多い処理。

@keyframes kf-cover-slide {
  0% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}

推奨

transformプロパティを使った例。レンダリングに影響が少ない。

@keyframes kf-cover-slide {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.1% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}