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

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