アニメーションを実現するには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); } }