Css slider keyframe end of the loop shows blank page - html

Question

I am having some issues with the slider i made using CSS. I have 2 images and i am trying to slide left. At the end of the second image, it should go first but instead shows blank slide. I think there is a problem with the keyframe percentage, not sure yet?
How do i calculate the keyframes for 2 sliding images?
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="http://example.com/wp-content/uploads/2015/10/cyprus-nicosia-2.jpg" alt>
<figcaption>slider 1 caption</figcaption>
</figure>
<figure>
<img src="http://example.com/wp-content/uploads/2015/10/nicosia.jpg" alt>
<figcaption> slider 2 caption</figcaption>
</figure>
</figure>
</div>
and CSS
/* Frontpage Slider */
#keyframes slidy {
0% {
left: 0%;
}
50% {
left: -100%;
}
75% {
left: -200%;
}
100% {
left: -200%;
}
}
#-webkit-keyframes slidy {
0% {
left: 0%;
}
50% {
left: -100%;
}
75% {
left: -200%;
}
100% {
left: -200%;
}
}
figure {
margin: 0;
font-family: sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
figure.slider {
position: relative;
width: 200%;
font-size: 0;
animation: 25s slidy infinite;
-webkit-animation: 20s slidy infinite
}
figure.slider figure {
width: 50%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
top: 30%;
left: 10%;
width: 75%;
text-align: center;
line-height: 160%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 3vw;
padding: .6rem;
}

Answer 1

There is much wrong there, have a look here.
<div id="captioned-gallery">
<div class="slider">
http://codepen.io/damianocel/pen/PPEXgq
I could not fix the absolutely positioned figcaption though, I have no idea why, but am bit in a hurry. If someone can fox that meanwhile.

Answer 2

Well, this code worked for me to run 2 slides cyclic. The trick is to slow down the transition of the 2nd slide, so that when it finishes it cycles to first slide.
#keyframes slidy {
0% { left: 0%; }
50% { left: -100%; }
100% { left: -200%; }
}
#-webkit-keyframes slidy {
0% { left: 0%; }
50% { left: -100%; }
100% { left: -200%; }
}