我的css滑塊不起作用

Question

爲什麼我的CSS滑塊不起作用？

我想讓CSS內容滑塊，但我卡住了。我無法找到它不移動第一張照片的原因。也許動畫有什麼問題。

順便說一句，我使用鉻。

的滑塊代碼的CSS是如下：

.slider { 
overflow: hidden; 
height: 250px; 
} 

.slider figure div { 
    width: 20%; 
    float: left; 
} 

.slider figure img { 
    width: 100%; 
    float: left; 
} 

.slider figure { 
    position: relative; 
    width: 500%; 
    left: 0px; 
    margin: 0; 
    animation: 20s slideri infinite; 
} 

@keyframes slideri { 
0% { 
    left; 
    0%; 
} 

10% { 
    left; 
    0%; 
} 

12% { 
    left; 
    -100%; 
} 

22% { 
    left; 
    -100%; 
} 

24% { 
    left; 
    -200%; 
} 

34% { 
    left; 
    -200%; 
} 

36% { 
    left; 
    -300%; 
} 

46% { 
    left; 
    -300%; 
} 

48% { 
    left; 
    -400%; 
} 

58% { 
    left; 
    -400%; 
} 

60% { 
    left; 
    -300%; 
} 

70% { 
    left; 
    -300%; 
} 

72% { 
    left; 
    -200%; 
} 

82% { 
    left; 
    -200%; 
} 

84% { 
    left; 
    -100%; 
} 

94% { 
    left; 
    -100%; 
} 

96% { 
    left; 
    0%; 
} 
} 

和HTML的部分是：

<div> 
     <div class="slider"> 
      <figure> 
       <div class="slide"> 
        <img src="kuva_1.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva_2.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva_3.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva_4.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva-5.jpg"> 
       </div> 
      </figure> 
     </div> 
    </div> 

Answer 1

您爲關鍵幀使用;代替:。

@keyframes slideri { 
    0%{left; 0%;} 
    /* ... */ 
} 

應該成爲

@keyframes slideri { 
    0%{left: 0%;} 
    /* ... */ 
} 

您對JSFiddle例子。