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%;} 
    /* ... */ 
} 

はJSFiddle上

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

あなたの例になるはずです。