html - 我的 CSS slider 不起作用

Question

为什么我的 CSS slider 不起作用？

我正在尝试制作 CSS 内容 slider ，但我卡住了。我找不到它不通过第一张照片的原因。动画有问题吗？

顺便说一句，我使用 chrome。

slider 代码的 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 上的示例.