html - CSS3 过渡搞乱了 webkit 中的字体？

Question

自从我添加了一个 css 转换(第一个是悬停，第二个是动画)后，它似乎弄乱了我的字体，它们看起来“不同”。

这太奇怪了，我找了好几个小时都没有找到任何东西，我也无法弄清楚为什么会这样。

在firefox里好像没问题，但是safari和chrome就出问题了。

http://www.simplerweb.co.uk

左下方齿轮动画下方的所有内容看起来都更轻，导航菜单看起来也一样。

我完全迷失了这一点。

这是动画的 CSS。

.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
 -webkit-animation-name:             backrotate; 
    -webkit-animation-duration:        13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


-moz-animation-name: backrotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;

 -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


    -moz-animation-name: rotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function:linear;
    -moz-animation-iteration-count: infinite;

}


@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);

  }
  to { 
    -webkit-transform: rotate(360deg);

  }
}

@-moz-keyframes rotate {
from {

    -moz-transform: rotate(0deg);
  }
  to { 

    -moz-transform: rotate(360deg);
  }
}



@-webkit-keyframes backrotate {
    0% {

        -webkit-transform: rotate(360deg);
    }
    100% {

        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes backrotate {
    0% {
        -moz-transform: rotate(360deg);

    }
    100% {
        -moz-transform: rotate(0deg);

    }
}

Answer 1

我想我遇到了类似的问题，为我解决的是添加

-webkit-font-smoothing: antialiased;

到我的 body CSS。当出现任何类型的动画时，webkit 会尝试对文本进行抗锯齿以帮助动画，因此将它添加到开头可以防止它发生变化或看起来不同。