Question

我正在研究css3中的一些新动画，但我的字体焦点有问题。一切都很好，直到动画停止：然后文字变得模糊。用截图解释它会更好（效果看起来更糟糕）：

这是代码：动画代码：

@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);
  } 
}

和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

添加-webkit-font-smoothing：antialiased;你的动画元素。 WebKit的模糊性来自其默认行为，在进行任何转换或动画时，将字体大小从子像素切换到标准抗锯齿。

CSS动画中的模糊文本

1 个答案: