Mein CSS-Schieberegler funktioniert nicht

Question

Warum funktioniert mein CSS-Schieberegler nicht?

Ich versuche CSS-Inhalt Slider zu machen, aber ich bin fest. Ich kann den Grund nicht finden, warum es das erste Bild nicht bewegt. Ist etwas mit der Animation vielleicht nicht in Ordnung?

Übrigens verwende ich Chrom.

Die CSS für Slider-Code ist wie folgt:

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

Und der HTML-Teil ist:

<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

Sie ; für die Keyframes statt : verwendet.

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

sollte

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

Ihr Beispiel auf JSFiddle werden.