前段时间做了一个夹娃娃的页面，娃娃所在的跑道是一直在运动的，我用的是css3-transform（translate3d）实现的运动，但是发现在苹果手机上面页面会有闪动（跑道到头后回来的瞬间），于是百度了很多文章终于找到了原因和解决办法，具体可以参见这篇文章
html结构以及css类似如下：
.road_box{
/*向右运动*/
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加上这个
-webkit-transform: translate3d(0,0,0);
闪动问题的确是好了，但是发现两个road之间出现了一条很小的缝隙，我是给父级road_box加了一个同样图片的背景 来掩饰解决的。
另外，千万不要加这个
.road_box{
-webkit-transform-style: preserve-3d;
}
.road{
-webkit-backface-visibility: hidden;
}
上面链接文里说的很明白，这是给translate2d加的，如果你给3d加了这个，在safari浏览器上就会看不到img，或者很大。
