My css slider doesn't work

Question

Why my CSS slider doesn't work?

I am trying to make CSS content slider but I am stuck. I cant find the reason why it doesn't move pass the first picture. Is there something wrong with the animation maybe.

by the way I use chrome.

The CSS for slider code is as below :

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

And the HTML part is :

<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

You used ; instead of : for the keyframes.

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

should become

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

Your example on JSFiddle.