Text gets Blured during transition

Question

On hovering Text gets blured(on Chrome). I know this is because of SCALING of text..
So my question is is there any way to do the same task in which text doesn't get blured.
Here is what I have tried

span a {
  font-size: 24px;
}
span:hover a {
  color: #ba4a49;
  -webkit-transform: scale(10);
  transition: all 2s linear;
}

<span>
    <a href="#">Hello this looks blured during transition</a>
</span>

update
Plese Note that I have to scale the text from center. If I change the font Size 10 Times then scaling is done from left(not center)

span:hover a {
  color: #ba4a49;
  font-size:250px;
  transition: all 2s linear;
}

See Updated Jsfiddle Link

The text doesn't blur when my browser was fullscreened, just FYI. — David Zech, Aug 18 '15 at 19:17
Have you tried [this](http://stackoverflow.com/a/15472358/757839)? — BCDeWitt, Aug 18 '15 at 19:17

score 3 · Answer 1 · answered Aug 18 '15 at 19:19

3

To prevent blurring, you can transition on font-size instead of on transform: scale. For what it's worth, I didn't experience any blurring problems with your example on my own Chrome browser.

Live Demo:

span a{
    font-size: 24px;
}
span:hover a{
    color:#ba4a49 ;
    font-size: 240px;
    transition: all 2s linear;
}

<span><a href="#">Hello this looks blured during transition</a></span>

answered Aug 18 '15 at 19:19

Maximillian Laumeister

19,884
8
59
78

I didn't notice any blurring either until I resized my browser window much smaller (Google Chrome, Windows 8.1, latest) – David Zech Aug 18 '15 at 19:20
I don't think so that your way can be a replacement of scaling, need more css trick to simulate it – Hossein Shahsahebi Aug 18 '15 at 19:22
in my screen Text gets blured .. Changing font size will not solve my one problem.. I need to scale from the center.. scaling axis needs to be defined.. How to do this? – Vishu238 Aug 18 '15 at 19:22
@HosseinShahsahebi It depends entirely on the use case. For some use cases this will be a suitable replacement as-is, for other use cases it will need some extra CSS. – Maximillian Laumeister Aug 18 '15 at 19:23
@Vishu238 If you don't mind using a tiny bit of JavaScript, here is a way that you can get `font-size` to scale from the center: https://jsfiddle.net/be9o8tz9/5/ – Maximillian Laumeister Aug 18 '15 at 19:49

Text gets Blured during transition

1 Answers1

Linked