CODEWITHSUNDEEP
csssvg
Jomon Antony
Jomon Antony

Reputation: 258

svg blurring while zooming

I've create a svg image, now the problem is i'm trying to animate that image with css3 animations

@keyframes animate {
    from {transform: scale(1);}
    to {transform: scale(10);}
}

but the image is blurring during the animation, and immediately become fine after the animation.

Is there any solution for not blur the image during the animation?

Upvotes: 0

Views: 287

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 26034

This happens with all elements regardless of whether or not they're SVG. The browser doesn't recalculate the dimensions and such until the element is done animating.

You can try forcing the GPU to render it by adding translate3d(0,0,0) or translateZ(1px), but I am unsure if this will actually help the rendering.

As such, you should set the initial value to the smaller one and animate to scale(1) instead. In your case the smaller value would be scale(.1)

Upvotes: 1

Erik Dahlström
Erik Dahlström

Reputation: 61046

You can try animating width and height instead of transform.

@keyframes zoomSize {
    from { width: 30px; height: 30px; }
    to {width: 300px; height: 300px; }
}

Here's a running example.

Upvotes: 0

Related Questions