Jquery 为什么应用CSS3动画时背景文本的字体会改变？

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

这是我的代码和一个

---

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

看来问题在于字体渲染。这里有一个解决方案。将

body{-webkit字体平滑：亚像素抗锯齿；}

添加到css文件中

---

是的，它改变了Lorem Ipsum的字体。正如您所说，淡入效果会修改不透明度，但我认为它应该更改淡入比例div的不透明度，而不是页面中的其他元素。当我使用小提琴时，Lorem Ipsum上没有字体更改。

.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);
}       
}