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;

}

还有更多方法，但是对于无限运行的关键帧动画，您不能在最后一张图片进入视图后结束关键帧，您必须添加一个声明以返回具有关键帧规则的初始状态。如果你不这样做，它就会跳到开头。

链接：

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

我的基于CSS的图像滑块问题从最后一个回到第一个图像

1 个答案: