Текст становится размытым во время перехода

Question

При наведении текста текст становится размытым (на Chrome). Я знаю, что это из-за SCALING текста ..
Так что мой вопрос в том, есть ли способ выполнить ту же задачу, в которой текст не получает размытия.
Вот что я пытался

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>

обновление
PLese Обратите внимание, что я должен масштабировать текст от центра. Если изменить размер шрифта в 10 раз, то масштабирование производится слева (не центр)

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

See Updated Jsfiddle Link

Answer 1

Для предотвращения размытия, вы можете перейти на font-size, а не на transform: scale. Для чего это стоит, я не испытывал никаких проблем с размыванием вашего примера в своем браузере Chrome.

Демо:

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>