Html 我的css滑块没有'；行不通

为什么我的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>

---

您使用的

而不是关键帧的
：

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

应该成为

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

你的例子很有趣