HTML页面的一部分在谷歌中消失了但在firefox中是正常的

Question

这个html页面的一部分在google chrome中消失了，但是在firefox中没问题。我检查浏览器的控制台部分，每个元素都是正确的，但它只是不能出现在google chrome中。这是图片，我为两个小球添加了一个滚动动画。我不认为这是动画导致消失，因为我删除了动画jquery文件，但没有任何改变......

<div class="advantage" >
<div class="adv_wrapper">
<div class="adv_header">
    <div class="line2 horizon2"></div>
    <div class="adv_title horizon2">ADVANTAGE</div>
    <div class="line2 horizon2"></div>
</div>
<div class="adv_content">
    <div class="ball_content">
        <div class="ball1 ball">
            <div class="ball1_inner"><img src="images/adv/left.png"></div>
        </div>
        <div class="ball2 ball"></div>
        <div class="ball3 ball">
            <div class="ball3_inner"><img src="images/adv/right.png"></div>
        </div>
    </div>
    <div class="target"></div>
    <div class="target_des">
        <a class="szll item" href="">AAA</a>
        <a class="zczz item" href="">BBB</a>
        <a class="yjjs item" href="">CCC</a>
        <a class="zyhz item" href="">DDD</a>
    </div>
</div>

的CSS：

.advantage .target{
width: 100%;
height: 340px;
background:url(../images/adv/target.png);
/*border:solid 1px red;*/
}
.target_des{
/*border:solid 1px black;*/
height: 100px;
}
.target_des>.item{
float: left;
font-family: "黑体";
font-size: 18px;
color: rgb(160,160,167);
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
/*border:solid 1px red;*/
}
.target_des>.item::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: background-color .3s;
}
.target_des>.item:hover {
background-color: rgb(30,148,211);
color: white;
-webkit-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15);
}

.target_des>.item:hover::after {
opacity: 1;
}
.szll{
display: inline-block;
margin-left: 40px;
margin-right: 165px;
}
.zczz{
display: inline-block;
margin-right: 300px;
}
.yjjs{
display: inline-block;
margin-right: 170px;
}

JS：

 $(document).ready(function(){
 setInterval(function(){
    $(".ball1_inner").addClass("roll-left").one('animationend',function(){
        $(this).removeClass("roll-left");
        $(".ball3_inner").addClass("roll-right").one('animationend',function(){
            $(this).removeClass("roll-right");
        })
    })
},8000);
})

谷歌浏览器中的

在firefox中