Last image slides too fast - html

Question

It is a slide in a html using css.
However when it slides to the last image (the duration of the last image is too short), it carries on to the first too fast. All the rest of the images are fine.
Here is the html part:
<div id="slider" style="text-align: center">
<figure>
<img src="pics/img01.png">
<img src="pics/img02.png">
<img src="pics/img03.png">
<img src="pics/img04.png">
<img src="pics/img05.png">
</figure></div>
Here is the css part:
#keyframes slidy{
0%{left: 0%;}
20%{left: 0%;}
35%{left: -100%;}
45%{left: -150%;}
55%{left: -200%;}
65%{left: -250%;}
75%{left: -300%;}
95%{left: -350%;}
100%{left: -400%;}
}
body { margin: 100px left; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}

Answer 1

Yeah, I fixed your slideshow issue. It runs very smoothly now Check the codepen here.
The main thing about CSS sliders you have to keep in mind is the width you have given & the way you slide your different slides within that given width. Its all about maintaining that balance between width & the time taken to complete that one cycle of covering the width.
In your case you had 5 images but have broken your #keyframes into too many levels(the levels depend on the width of each of your images).
I have included an image showing how it works & broken your #keyframes as shown below:
#keyframes slidy{
0%{left: 0%;}
25%{left: -100%;}
50%{left: -200%;}
75%{left: -300%;}
100%{left: -400%;}
}
Check this codepen & let me know if it fixes your issue