【CSS】transform時における対象画像のちらつきを解消する方法

  • 2015-7-18
tr

普通にtransformを行う場合、
画像の上にマウスを置いてからほんの少し待ってみると、
transformのレンダリング完了後に描画の最適化が発生する。

これに対し、レンダリング対象のオブジェクトに対して、
will-changeプロパティの値に設定した動作(この場合ではtransform)の後に最適化(ちらつき)が発生しない。

will-change なし will-change あり



img src=”~~~~.jpg” class=”grow”



img src=”~~~~.jpg” class=”grow will”
img.grow {
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover ,img.grow_hover{
-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-o-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);
}
.will{
will-change: transform;
}
ページ上部へ戻る