我的 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上的例子。