title: Timing within a CSS Image Slider
body: <p>I am having an issue with timing within a CSS keyframe animation.</p>
  
  <p>I have it 90% there, but am having a gap between each image on appearance.</p>
  
  <p>I know this is a timing issue, but I can't for the life of me get the gap to disappear without breaking the current functionality.</p>
  
  <p>Code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
    position: relative;
    height: 200px;
    width: 300px;
    background: gray;
    overflow:hidden;
  }
  .slide,
  .slide img {
    position: absolute;
    top: 0;
    left: 0%;
    height: 100%;
    width: 100%;
  }
  .slide h1 {
    position: absolute;
    top: 20%;
    right: 0;
    height: 10%;
    color: white;
  }
  .slide p {
    position: absolute;
    top: 40%;
    left: 0;
    height: 60%;
    color: white;
  }
  .slide {
    transform: translateX(100%);
    -webkit-animation: slide 20s forwards infinite;
  }
  .slide:nth-child(2) {
    -webkit-animation-delay: 5s;
  }
  .slide:nth-child(3) {
    -webkit-animation-delay: 10s;
  }
  .slide:nth-child(4) {
    -webkit-animation-delay: 15s;
  }
  @-webkit-keyframes slide {
    0% {
      transform: translateX(100%);
    }
    5% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider"&gt;
    &lt;div class="slide"&gt;
      &lt;img src="http://lorempixel.com/300/200" /&gt;
      &lt;h1&gt;Slide 1&lt;/h1&gt;
  
      &lt;p&gt;Text to do with slide 1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      &lt;img src="http://lorempixel.com/600/400" /&gt;
      &lt;h1&gt;Slide 2&lt;/h1&gt;
  
      &lt;p&gt;Text to do with slide 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      &lt;img src="http://lorempixel.com/1200/800" /&gt;
      &lt;h1&gt;Slide 3&lt;/h1&gt;
  
      &lt;p&gt;Text to do with slide 3&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      &lt;img src="http://lorempixel.com/1800/1200" /&gt;
      &lt;h1&gt;Slide 4&lt;/h1&gt;
  
      &lt;p&gt;Text to do with slide 4&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my snippet, you can see a short delay which allows the grey background to appear before the next image.</p>
  
  <p>My design will <strong>only cater for 4 images</strong>,which should be on screen for around 5 seconds each. I'm happy to stay with CSS keyframes for this (not jquery or external plugins).</p>
  
  <p>Please note I've removed prefixes so will currently support the <code>webkit</code> prefix.</p>
  
  <p>Could someone please explain how I should be timing this? I'm pretty sure it's this 0% -> 5% transition, but I can't be sure?</p>
  
  <p>any assistance here would be great.</p>