CSS3 infinite loop back to first image - html

Question

I have a 5 image css3 infinite slider which is on a continuous loop (there is no jQuery or JS involved here and I don't want any either), however as soon as the last image has slid into position it jumps back to the first image. I have tried adding the first image as the 6th image in the group but this hasn't made any difference, can someone look over my CSS3 calculations to see what I'm doing wrong?
HTML
<div id="slider">
<figure>
<img src="banner01.jpg" alt="">
<img src="banner02.jpg" alt="">
<img src="banner03.jpg" alt="">
<img src="banner04.jpg" alt="">
<img src="banner05.jpg" alt="">
</figure>
</div>
CSS3
#keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; width:710px; height:300px; float:center; margin:auto; }
div#slider figure img {float: left; }
div#slider figure {
position: relative;
height:100%;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidr;
transition:.7s;
}
Thanks in advance

Answer 1

Your 100% part of the animation - the -400% value - is actually only being displayed for exactly... 0 seconds before it gets rewound to the 0% value. Try adding a gap that keep the -400% value active for longer:
#keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
85% { left: -300%; }
90% { left: -400%; }
100% { left: -400%; }
}
/* Sorry, I'm on Safari */
#-webkit-keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
85% { left: -300%; }
90% { left: -400%; }
100% { left: -400%; }
}
body {
margin: 0;
}
div#slider {
overflow: hidden;
width:710px;
height:300px;
/* I dont think this is actually a thing: */
float:center;
margin:auto;
}
div#slider figure img {
float: left;
}
div#slider figure {
position: absolute;
height:100%;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
/* And again, I'm on Safari. Also, speed it up for development purposes. */
-webkit-animation: 10s slidr infinite;
animation: 10s slidr infinite;
transition:.7s;
}
img {
width: 100vw;
height: 400px;
}
<div id="slider">
<figure>
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
</figure>
</div>
Notice that it actually snaps back to 0 and not animates. You could create a transition again - if you want to - by adding another gap that restores the left value to 0%.
Update to return to start
To return to start, just make sure that:
The total of different steps equals the amount of frames + 1
The last and first step start at 0
In SASS we could easily automate this process:
#mixin keyframes-slider($name, $frames){
// Create keyframes wrapper
#keyframes #{$name} {
// Loop through the amount of frames (-1)
#for $i from 0 through ($frames - 1) {
// Divide the 100% by the amount of frames
// The first frame is 0, and the last will return to 0
#{100% / $frames * $i} { left: -100% * $i; }
}
// Add the final frame
100% { left: 0; }
}
}
Simply use it by including it and it will generate the keyframes you want:
#include keyframes-slider(slidr, 8);
As an example (pre-generated with 8):
/* Thos following is my compressed SASS output. */
#-webkit-keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}#keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}
/* This is a quick way to give a good example. */
ul {
width: 800px;
height: 100px;
padding: 0;
margin: 0;
list-style: none;
-webkit-animation: slidr 10s infinite;
animation: slidr 10s infinite;
position: absolute;
left: 0;
top: 0;
}
div, li {
width: 100px;
height: 100px;
float: left;
font-size: 30px;
background: #ececec;
}
li:nth-child(2n){
background: #dd0300;
}
div {
position: relative;
overflow: hidden;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>