Question

I’m encountering a strange display bug where CSS3 Animation affects the weight of all text on the page, even on elements the animation is not applied. Any idea why this is happening?

(You can reference this page: https://gtrot.com/chicago)

Notice that upon hovering over the logo in the center of the blue header, the logo wiggles. I do this by applying 2 classes on hover: ‘animated’ and ‘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%); }
}

and

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

Thanks in advance,
Matt

Answer 1

Add this to the html styles and it should solve your problem:

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