为什么我的动画顶部有一小段颜色？

Question

我无法弄清楚为什么我的CSS动画中的图标上方会出现一小段颜色。看起来它正在制作两个不同的物体，当它动画图标并且它们重叠但略微偏离。不知道为什么会这样做。我也用icomoon来生成图标。我附上了一个GIF来展示这个问题。

HTML

<div class="resources">
  <a href="/us/partners/resources/">
    <div class="icon-area">
     <i class="icon-channel-marketing-materials tera"></i>
     <span class="icon-channel-press"></span>
     <span class="icon-channel-screenshots"></span>
    </div>
    <hr>
    <div class="desc">
      <h3>Gather Tools</h3>
      <p>Browse go-to-market templates and customizable marketing materials.</p>
    </div>
    <span class="step-number">2</span>
   </a>
 </div>

CSS

/* Resources Step Animation */
.resources .icon-channel-press,
.resources .icon-channel-screenshots {
    position: absolute;
    -webkit-transition: all 800ms 0.4s;
    -moz-transition: all 800ms 0.4s;
    -ms-transition: all 800ms 0.4s;
    -o-transition: all 800ms 0.4s;
    transition: all 800ms 0.4s;
    -webkit-transform: translate3d(0,0,0);
    color: #6D787F;
}
.resources .icon-channel-press {
    top: 100px;
    left: -30px;
    color: #5d8723;
}
.resources:hover .icon-channel-press {
    left:30px;
    top: 50px;
    font-size: 2.4em;
}
.resources .icon-channel-screenshots {
    top: 100px;
    right: -30px;
    color: #5d8723;
}
.resources:hover .icon-channel-screenshots {
    right:30px;
    top: 50px;
    font-size: 2.4em;
}
.resources:hover .icon-channel-marketing-materials {
    color: #8DC63F;
    -webkit-transition: color 800ms 0.4s;
    -moz-transition: color 800ms 0.4s;
    -ms-transition: color 800ms 0.4s;
    -o-transition: color 800ms 0.4s;
    transition: color 800ms 0.4s;
}

Answer 1

您需要在z方向上将其翻译一个像素，以使浏览器更好地渲染它

transform: translate3d(0,0,1px);