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

Question

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

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

请注意，将鼠标悬停在蓝色标题中心的徽标上时，徽标会摆动。我通过在悬停时应用 2 个类来做到这一点：“动画”和“摆动”

@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;
}