title: CSS animation keyframe percentage issue
body: <p>I have posted before about CSS Keyframe animation and tried a different way of using delays.</p>
  
  <p>I had css continous slider of 5 divs which worked fine. However I needed to remove two of the divs so there is only three.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper{
      position: relative;
      height: 330px;
      display: grid;
      overflow: hidden;
      width:600px;
      background:#f1f1f1;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    animation: slider 9s cubic-bezier(0.5, 1, 0.5, 1) infinite;
    color:#fff;
    font-size:30px;
    text-align:center;
    padding-top:25%;
  }
  
  .slide:first-of-type {
    animation-delay: -9s;
    background:red;
  }
  .slide:nth-of-type(2) {
    animation-delay: -6s;
    background:blue;
  }
  .slide:last-of-type {
    animation-delay: -3s;
    background:black;
  }
  
  @keyframes slider {
    0% {
      transform: translateX(0);
      opacity: 1;
    } 
    16% {
      transform: translateX(0);
      opacity: 1;
    } 
    20% {
      transform: translateX(100%);
      opacity: 1;
    } 
    75% {
      transform: translateX(100%);
      opacity: 0;
    } 
    76% {
      transform: translateX(-100%);
      opacity: 0;
    } 
    96% {
      transform: translateX(-100%);
      opacity: 1;
    } 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="slide"&gt;
      1
    &lt;/div&gt;
      &lt;div class="slide"&gt;
      2
    &lt;/div&gt;
      &lt;div class="slide"&gt;
      3
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/iamjools/pen/OJMJVNw" rel="nofollow noreferrer"><em>Link to my on going codepen.</em></a></p>
  
  <p>So I have tried changing the animation to 9s, 3 seconds per div.
  I have changed the delay on the divs to -9s, -6s, -3s respectively but I have a pause in between each div sliding in.</p>
  
  <p>I have tried to alter the percentages which is where I believe I am going wrong. </p>
  
  <p>I am wondering if anyone can give me some help on the percentages I need to change or if there is a formula to use so I can switch up the amount of divs in the future if need be?</p>