http://jsfiddle.net/nicktheandroid/5Ytnj/
When I add -webkit-backface-visibility: hidden;
to the .circ
element, it causes it to stay pixelated even after the animation is complete.
I'm wondering if there's a way to get it to not pixelate while animating. I've viewing it in the dev version of Google Chrome.
Okay so i think i've come up with a work around;
essentially; don't use "scale". use "scale3d" and have it setup so that the largest you want the image is scale3d(1,1,1)
.
Here is an example with the circle thing you had in there. I changed the scale to 5, because i didn't want to put 0.222222222222222222222222222222222 into the scale3d func...
[edit] So i tried the jsfiddle demo again, on a computer with no hardware acceleration, and the pixelation effect was gone. So it seems that it's the same problem as with scale3d where it converts it into a texture and then scales it. you can do as in the circ3
div here.
来源:https://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t