前段時(shí)間做了一個(gè)夾娃娃的頁(yè)面津辩，娃娃所在的跑道是一直在運(yùn)動(dòng)的仅乓，我用的是css3-transform（translate3d）實(shí)現(xiàn)的運(yùn)動(dòng)咨演，但是發(fā)現(xiàn)在蘋果手機(jī)上面頁(yè)面會(huì)有閃動(dòng)（跑道到頭后回來(lái)的瞬間）攻走，于是百度了很多文章終于找到了原因和解決辦法谓媒，具體可以參見(jiàn)這篇文章
html結(jié)構(gòu)以及css類似如下：
.road_box{
/*向右運(yùn)動(dòng)*/
position: absolute;
right:0;
top:0;
width:200px;
height:50px;
-webkit-animation: "roadmove" 10s linear infinite;
}
.road{
float:left;
width:100px;
height:50px;
position:relative;
}
.road img{
position:absolute;
top:10px;
left:;
/*不同img淆院，不同的left*/
}
@-webkit-keyframes "roadmove"{
0% {
-webkit-transform:translate3d(0,0,0);
}
100%{
-webkit-transform:translate3d(100px,0,0);
}
}
<div class="road_box">
<div class="road">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="road">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</div>
按照上面鏈接文里的解決辦法就是，給road加上這個(gè)
-webkit-transform: translate3d(0,0,0);
閃動(dòng)問(wèn)題的確是好了句惯，但是發(fā)現(xiàn)兩個(gè)road之間出現(xiàn)了一條很小的縫隙土辩，我是給父級(jí)road_box加了一個(gè)同樣圖片的背景 來(lái)掩飾解決的。
另外抢野，千萬(wàn)不要加這個(gè)
.road_box{
-webkit-transform-style: preserve-3d;
}
.road{
-webkit-backface-visibility: hidden;
}
上面鏈接文里說(shuō)的很明白拷淘，這是給translate2d加的，如果你給3d加了這個(gè)指孤，在safari瀏覽器上就會(huì)看不到img启涯，或者很大。
