自动图像滑块在桌面工作，但它不能在移动设备上工作

Question

下面的代码是我的自动图像幻灯片的HTML。在桌面上它做工精细version.But它不是在移动设备

<div id="slider1"> 
    <figure> 
     <img src="${context:layout/images/action1.jpeg}"/> 
     <img src="${context:layout/images/action2.jpeg}"/> 
     <img src="${context:layout/images/action3.jpeg}"/> 
     <img src="${context:layout/images/action4.jpeg}"/> 
     <img src="${context:layout/images/action5.jpeg}"/> 
    </figure> 
</div> 

这个CSS用于Android设备的工作

@keyframes slidy { 
    0% { left: 0%; } 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

这个CSS的iPhone设备

@-webkit-keyframes slidy { 
    0% { left: 0%; } 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

CSS自动图像幻灯片

div#slider1 { 
    overflow: hidden; 
} 
div#slider1 figure img { 
    width: 20%; 
    float: left; 
    height: 150px; 
} 
div#slider1 figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slidy infinite; 
} 

Answer 1

财产animation: 30s slidy infinite;不工作没有prefrix在webkit（铬/ safari），所以你需要添加-webkit-animation: 30s slidy infinite;