Reputation: 258
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
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
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