My CSS animation is causing some unexpected behavior on page load. Once the animation completes, the text suddenly appears thicker than intended, especially when it's a specific shade of red.
Curiously, this strange "popping" effect only occurs with the red text element.
If you run the code snippet below, you'll see the issue in action. The "popping" effect seems to only affect the red title while the others remain consistent.
body {
background: #000;
}
div {
background: #111;
padding: 2px 15px;
margin-bottom: 5px;
animation: fadein 2s;
}
h2 {
color: #FFF;
font-weight: normal;
font-size: 16px;
}
.white {
color: #FFF;
}
.red {
color: #fc1313;
}
.yellow {
color: #f2af2b;
}
.green {
color: #4cf22b;
}
/* FadeIn Effect */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<div>
<h2 class="white">
Some White Title
</h2>
</div>
<div>
<h2 class="red">
Some Red Title
</h2>
</div>
<div>
<h2 class="yellow">
Some Yellow Title
</h2>
</div>
<div>
<h2 class="green">
Some Green Title
</h2>
</div>I'm trying to figure out why this happens and more importantly, how I can prevent it from occurring altogether?