为什么使用CSS3动画时背景文字的字体会改变?

Question

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

下面是我的代码。

.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文件

小提琴

Answer 2

我没有50的声望，所以我不能评论，而是必须以回答的形式来做所有的事情。你是指大块Lorem Ipsum显示在弹出窗口的背景，当你打开它?如果是这样的话，你能看到它的原因是因为渐隐效果修改了不透明度，使它进来，因此背景在一开始就显现出来了。如果这不是你所指的，你能详细说明一下吗?因为我没看到其他值得注意的东西