Мой слайдер 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.