Text "pops" thicker in Chrome after CSS animation is completed

Question

I'm using a CSS animation to fade in some elements on page load. When the animation is completed, the text "pops" and becomes thicker than I want it to be.

To add to my confusion, it only seems to happen when the text is a certain shade of red.

Run the code snippet below to see it in action. Notice how only the red title seems to have this "popping" effect.

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>

Why does this happen, and more importantly, how can I stop this from happening altogether?

Answer 1

A hacky solution that I used to prevent this from happening is animating the element's opacity from 0 to 0.999 instead.

    body  {
        background: #000;
    }
    
    div {
      background: #111;
      padding: 2px 15px;
      margin-bottom: 5px;
      
      animation: fadein 2s;

      opacity: 0.999;
    }
    
    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: 0.999;
      }
    }
    
    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
      from { 
        opacity: 0;
      }
      to {
        opacity: 0.999;
      }
    }

<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>