Todd Gilbey Todd Gilbey - 3 months ago 18
CSS Question

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

I have a pure CSS-based image slider on an infinite loop which is pretty slick, however, the transition from the last image back to the first doesn't slide, but just jumps back to it.

How do I go about fixing this?

Here is my code;

<!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

This is the relevant part of the code I have changed.

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

}

There are more ways, but for an infinitely running keyframe animation, you cannot just end the keyframes after the last pic is in view, you have to add a declaration to go back to the initial state with keyframes rule. If you do not do that, it will just jump to the start.

Link:

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