Fix blurry edges when using transform: scale

October 13, 2016

As you scale an element in a keyframe animation, it may develop increasingly blurrier edges. Since the element never stops increasing or decreasing its width, the browser never renders it correctly, keeping it in a perpetual state of pixelation.

If you’re trying to solve this issue, you can think of a div with a scale of greater than 1 as an image. If you stretch an image to twice its size, there will naturally be some pixelation. In order to combat this, you can make sure the maximum scale never exceeds 1:

@keyframes doubleSizeOfElement {
    0%   { transform: scale(0.5); }
    100% { transform: scale(1.0); }
}

Afterwards, set the div’s default width and height to what it needs to be at your largest size (scale(1)). For example, if I have a keyframe animation that doubles a square to a max size of 200 pixels, I’ll set the square's width and height to 200 pixels. The code above starts off the animation at scale(0.5), which will give it the starting width of 100 × 100 pixels.

As it grows, the div will double in size in a clean fashion (your intended effect), when in actuality, it’s simply moving from half size to whole size.