Search code examples
cssanimationtransformscale

CSS @keyframes scale text blurry

I scale text in @keyframes animation, when the text is increased, it becomes a blurry, how can I prevent it?

JS Bin Example

Thanks!

Solution

  • Easiest way to resolve issue is to make the largest state scale 1, and the smaller state scale 0.5, and adjust the font size accordingly. See http://jsbin.com/zonuriza/3/edit. I also updated it to function properly in Firefox.