为什么在应用 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

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

FIDDLE

Answer 2

我没有 50 声望，所以我不能发表评论，相反，我必须以答案的形式做所有事情。您是指打开它时在弹出窗口背景中显示的 Lorem Ipsum 块吗？如果是这样，您可以看到它的原因是因为淡入效果修改了不透明度以将其引入，因此背景在一开始就显示出来。如果这不是你所指的，你能详细说明一下吗？因为我没有看到任何其他值得注意的东西。