我的基于 CSS 的图片滑块问题，从最后一张图片返回到第一张图片

Question

我在一个无限循环上有一个纯粹的基于 CSS 的图像滑块，它非常流畅，但是，从最后一张图像返回到第一张图像的过渡不会滑动，而是跳回它.

我该如何解决这个问题？

这是我的代码；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>min-css-slider</title>
<link href="mini-css-slider.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="slider">
<figure>
    <div class="image-slider" id="slide-1">
    </div>
    <div class="image-slider" id="slide-2">
    </div>
    <div class="image-slider" id="slide-3">
    </div>
    <div class="image-slider" id="slide-4">
    </div>
    <div class="image-slider" id="slide-5">
    </div>
</figure>
</div>
</body>
</html>



 @charset "utf-8";
/* CSS Document */
body{
width:1000px;
margin:0 auto;
border:solid black 3px;
}
#slider{
overflow:hidden;
width:400px;
border:solid 5px #E0DDDD;
}
#slider figure div{
float:left;
width:20%;
}
.image-slider{
height:400px;
background-size:cover;
}
.image-slider div{
position:absolute;
margin:20px;
background-color:#0D0155;
height:100px;
width:20%;
}
.bottom-box{
position:absolute;
width:100%;
height:100px;
bottom:10px;
background-color:#0D0155;
}
#slider figure{
position:relative;
margin:0;
width:500%;
left:0;
text-align:left;
font-size:0;
animation:20s slider infinite;
}
@keyframes slider{
0%{
    left:0;
}
20%{
    left:0;
}
25%{
    left:-100%;
}
45%{
    left:-100%;
}
50%{
    left:-200%;
}
70%{
    left:-200%;
}
75%{
    left:-300%;
}
95%{
    left:-400%;
}
100%{
    left:-400%;
}
}

Answer 1

这是我更改的代码的相关部分。

85%{
left:-400%;
}
100%{
left:0;

}

还有很多方法，但是对于无限运行关键帧动画，你不能在看到最后一张图片后就结束关键帧，你必须添加一个声明回到初始状态关键帧规则。如果您不这样做，它将直接跳转到开头。

Link:

http://codepen.io/damianocel/pen/xOrqvr

我的基于 CSS 的图片滑块问题，从最后一张图片返回到第一张图片

My CSS-based image slider issue witth transition from last back to first image

css

slider

slideshow