爲什麼我的動畫在頂部有一條彩色條紋？

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