jquery - 为什么应用 CSS3 动画后背景文字的字体会发生变化？

Question

为什么在应用 css3 动画不透明度和变换比例时背景文本的字体样式会发生变化？我的页面中有一些文本内容。我也有一个点击我链接。当有人点击“点击我!”我显示一个带有 css3 动画的弹出窗口。但我观察到动画中的字体变化。

这是我的代码 fiddle .

.fade-in-scale{
animation-name: fade-in-scale;
-webkit-animation-name: fade-in-scale;  
-moz-animation-name: fade-in-scale;

animation-duration: .5s;    
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;   

animation-timing-function: ease-in-out; 
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;    

animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;  
-moz-animation-fill-mode: forwards;
}

@keyframes fade-in-scale {
0% {
    opacity: 0;
    -webkit-transform: scale(.7);
    -moz-transform: scale(.7);      
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}           
}

@-webkit-keyframes fade-in-scale {
0% {
    opacity: 0;
    -webkit-transform: scale(.7);
    -moz-transform: scale(.7);      
}
100% {

    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}       
}

Answer 1

问题似乎出在字体渲染上。这是一个解决方案。添加 body { -webkit-font-smoothing: subpixel-antialiased; 到 css 文件。

FIDDLE