CSS image slider

[jacob1986]

I have made a small CSS image slider for my webpage, but have a few issues with the slider and my images. The images differ in size on the screen (although I have made sure the images were the same size before upload). I have written code for three images, the first image of the slider is too high, the second image is great, third image is lower than the second and first image... and then it shows a fourth blank image?

 

HTML Code:

<div id="slider">
    <figure>
        <li><img src="http://xxx/jkhzmGV.jpg" /></li>                                  
        <li><img src="http://xxx/49RqNB5.jpg" /></li>                                 

        <li><img src="http://xxx/7nrTa5p.jpg" /></li>                 
    </figure>
</div>

 

CSS Code:

@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: -300%;
  }
 
  100% {
    left: -400%;
  }
}
 
  #slider {
    overflow: hidden;
  }
 
  #slider figure img {
    width: 20%;
    float: left;
  }
 
  #slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 30s slider infinite;
  }
 
}