Fuzzy text in CSS animation

Question

Im working on some new animation in css3, but i have a problem with font focus. Everything is going fine until animation stops: then text gets fuzzy. It's better to explain it with screenshots(effect looks worse live):

Image here

Here's code: animation code:

@keyframes pow {
  0%   {
    width: 80px;
    transform: scale(1.000, 1.000);
    -webkit-transform: scale(1.000, 1.000);
    -moz-transform: scale(1.000, 1.000);
    -o-transform: scale(1.000, 1.000);
    -ms-transform: scale(1.000, 1.000); }
  80%  {
    width: 410px;
    transform: scale(1.110, 1.110);
    -webkit-transform: scale(1.110, 1.110);
    -moz-transform: scale(1.110, 1.110);
    -o-transform: scale(1.110, 1.110);
    -ms-transform: scale(1.110, 1.110); }
  100%  {
    width: 400px;
    transform: scale(1.100, 1.100);
    -webkit-transform: scale(1.100, 1.100);
    -moz-transform: scale(1.00, 1.00);
    -o-transform: scale(1.100, 1.100);
    -ms-transform: scale(1.100, 1.100);
  } 
}

and CSS:

#panel {
  max-width: 50%;
  text-wrap: unrestricted;
}

#panel ul {
  list-style-type: none;
  text-wrap: unrestricted;
}

#panel > ul > li {
  text-wrap: unrestricted;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 2px solid #FFD58A;
  border-radius: 100px;
  background-color: rgba(242, 204, 155, 1);
}

#panel > ul > li a {
  text-decoration: none;
  color: #000000;
}

#panel > ul > li p {
  text-decoration: none;
  text-align: left;
  margin: 8px 45px 0px 110px;
  font-size: 0.8em;
}

#panel ul li img {
  float: left;
  width: 100px;
  height: 100px;
}

#panel > ul > li:hover {
  margin: 0px 10px 0px 0px ;
  -webkit-animation:pow 1s linear 1;
  -moz-animation:pow 1s linear 1;
  animation-fill-mode: forwards;
  animation-duration: 4.3s;
  animation-iteration-count: 0.9;   
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.3s;
  -webkit-animation-iteration-count: 0.9;
}

#panel > ul > li > ul {
  float: left;
  display: inline-flex;
}

#panel > ul > li > ul > li {
  margin: 0px 9px 0px 2px;
  padding: 0px 5px 0px 5px;
}

Answer 1

Add -webkit-font-smoothing: antialiased; to the element your animating. The fuzziness in WebKit comes from its default behavior switching font sizes from subpixels to standard antialiasing when doing any transition or animation.