Why does SVG get blurred when scaled under webkit

问题:

When scaling an SVG image using CSS scale transform, the image gets blurred under Chrome or Safari?

Here is a bit of my code:

        #logo {
            animation: cssAnimation 120s infinite;
            -webkit-animation: cssAnimation 120s infinite;
            -moz-animation: cssAnimation 120s infinite;
        }

        @keyframes cssAnimation {
            0% { transform: scale(1) }
            50% { transform: scale(2) }
            100% { transform: scale(1); }
        }

Many thanks for any help!

Raphaël

回答1:

Thanks a lot War10ck! This article helped me: when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border Using scale3d instead of scale, not going over 1, made the trick!