title: How to loop this css slider animation?
body: <p>I'm trying to create a css slider, So far i was only successful to get it to iterate correctly for only one time. Is there a way to make it loop infinitely without changing the final result?</p>
  
  <pre><code>&lt;div class="slider"&gt;
  &lt;div class="slides"&gt;
  &lt;div class="slider-1"&gt;&lt;/div&gt;
  &lt;div class="slider-2"&gt;&lt;/div&gt;
  &lt;div class="slider-3"&gt;&lt;/div&gt;
  &lt;div class="slider-4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.slider{
    width:700px;
    height:300px;
    margin:50px auto;
    border:1px solid;
    overflow:hidden;
  }
  .slides{
    width:400%;
    height:100%;
    -webkit-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;
    -moz-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;
    animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;
  }
  .slider-1, .slider-2, .slider-3, .slider-4{
    width:25%;
    height:100%;
    float:left;
  }
  .slider-1{
    background:#222;
  }
  .slider-2{
    background:#444;
  }
  .slider-3{
    background:#666;
  }
  .slider-4{
    background:#888;
  }
  
  @-webkit-keyframes slide-1{
    from{margin-left:0px;}
    to{margin-left:-100%;}
  }
  @-webkit-keyframes slide-2{
    from{margin-left:-100%;}
    to{margin-left:-200%;}
  }
  @-webkit-keyframes slide-3{
    from{margin-left:-200%;}
    to{margin-left:-300%;}
  }
  @-webkit-keyframes slide-4{
    from{margin-left:-300%;}
    to{margin-left:0%;}
  }
  @-moz-keyframes slide-1{
    from{margin-left:0px;}
    to{margin-left:-100%;}
  }
  @-moz-keyframes slide-2{
    from{margin-left:-100%;}
    to{margin-left:-200%;}
  }
  @-moz-keyframes slide-3{
    from{margin-left:-200%;}
    to{margin-left:-300%;}
  }
  @-moz-keyframes slide-4{
    from{margin-left:-300%;}
    to{margin-left:0%;}
  }
  @keyframes slide-1{
    from{margin-left:0px;}
    to{margin-left:-100%;}
  }
  @keyframes slide-2{
    from{margin-left:-100%;}
    to{margin-left:-200%;}
  }
  @keyframes slide-3{
    from{margin-left:-200%;}
    to{margin-left:-300%;}
  }
  @keyframes slide-4{
    from{margin-left:-300%;}
    to{margin-left:0%;}
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/1kcbpqfu/">http://jsfiddle.net/1kcbpqfu/</a></p>