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;

到我的身体css.当任何类型的动画发生时,webkit会尝试对文本进行抗锯齿以帮助动画,因此将其添加到开头可以防止它发生变化或看起来不同.

Answer 2

我有同样的问题.在执行webkit过渡时,一些锚文本变得抗锯齿.经过多次尝试后,我发现这只发生在已定位的元素中,并且z-index内部的其他元素也位于z-index中.

#footer {
    bottom: 0;
    left: 330px;
    right: 100px;
    height: 75px;
    background-color: #231f20;
    min-width: 540px;
    min-height: 75px;
    position: fixed;
    z-index: 10;
}

在我的页脚里面

#cityNav > ul > li a {
            font-size: 24px;
            text-transform: uppercase;
            position: relative;
            z-index: 110;
            line-height: 24px;
            height: 24px;
            display: block;
        }

这是我的过渡期

.circle {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-color: #ff0000;
        width: 20px;
        height: 20px;
        cursor: pointer;
        text-indent: -999em;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: all .2s ease-out; 
        -moz-transition: all .2s ease-out; 
        -o-transition: all .2s ease-out; 
        transition: all .2s ease-out;
    }
    .circle:hover {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }

Answer 3

您所看到的是 webkit 对文本进行抗锯齿处理，因为它将文本视为纹理而不是矢量。除了不使用转换或使用文本替换来提供图像而不是类型之外，您无能为力。

有一些关于 webkit 别名的相关线程，但我个人并没有太多运气将类型保留为类型，并且仍然使用转换。