Zooming blurry during transition animation

Question

I want to scale some text on hover, however during the animation the text looks blurry (although it's pretty hard to see). How can I prevent blur?

https://jsfiddle.net/vt7yxhcw/8/

HTML:

<link href='https://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>

<div class="title">LogoTest</div>

CSS

body {
  font-family: "Bitter";
  margin: 100px;
}

.title {
  color: #333333;
  font-size: 48px;
  font-weight: bold;
  cursor: pointer;
  background: white;
  padding: 16px 24px;
  display: inline-block;
  transition: transform 0.5s ease-in-out;
}

.title:hover {
  transform: scale(0.96);
}

Answer 1

See here: https://jsfiddle.net/vt7yxhcw/10/

modified CSS

.title {
  -webkit-font-smoothing: antialiased;
  transform: perspective(1px) scale(0.99999) translate3d( 0, 0, 0);
}

.title:hover {
  transform: perspective(1px) scale(0.96) translate3d( 0, 0, 0);
}

, , 1 ( ), . -webkit-font-smoothing: antialiased . translate3d( 0, 0, 0) , . perspective() 3D-, , .

, , , . , .