CSS 动画完成后 Chrome 中的文本 "pops" 变粗

Question

我正在使用 CSS 动画在页面加载时淡入一些元素。动画完成后，文本 "pops" 变得比我想要的更粗。

更让我困惑的是，它似乎只在文本为某种红色阴影时才会发生。

运行下面的代码片段可以看到它的实际效果。请注意只有红色标题似乎具有这种 "popping" 效果。

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>

为什么会发生这种情况，更重要的是，我怎样才能完全阻止这种情况发生？

Answer 1

我用来防止这种情况发生的一个 hacky 解决方案是将元素的不透明度设置为动画，从 0 到 0.999。

    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>

CSS 动画完成后 Chrome 中的文本 "pops" 变粗

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

css

animation

google-chrome

text-rendering