CSS3 Animation会影响页面上所有文本的权重，即使是应用动画的元素也是如此。任何的想法？

Question

我遇到了一个奇怪的显示错误，其中CSS3动画会影响页面上所有文本的重量，即使是未应用动画的元素也是如此。知道为什么会这样吗？

（您可以参考此页面：https://gtrot.com/chicago）

请注意，将鼠标悬停在蓝色标题中心的徽标上时，徽标会摇摆不定。我通过在悬停上应用2个类来实现这一点：'animated'和'wobble'

@keyframes wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-5%) rotate(-4deg); }
    30% { transform: translateX(4%) rotate(3deg); }
    45% { transform: translateX(-3%) rotate(-1deg); }
    60% { transform: translateX(1%) rotate(1deg); }
    75% { transform: translateX(-1%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}

和

.animated_slow {    
    -webkit-animation-duration: .8s;
    -moz-animation-duration: .8s;
    -ms-animation-duration: .8s;
    -o-animation-duration: .8s;
    animation-duration: .8s;
}

提前致谢， 马特

Answer 1

将此添加到html样式，它应该可以解决您的问题：

html {
    -webkit-font-smoothing: antialiased;
}