自動圖像滑塊在桌面工作，但它不能在移動設備上工作

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;