How to loop this css slider animation?

Question

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?

<div class="slider">
<div class="slides">
<div class="slider-1"></div>
<div class="slider-2"></div>
<div class="slider-3"></div>
<div class="slider-4"></div>
</div>
</div>

Css

.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%;}
}

http://jsfiddle.net/1kcbpqfu/

Answer 1

As far as I know, you can't nest more than one animation and add the animation-iteration-count property. It will repeat every animation individually.

However, if you do just one animation, you can set it to repeat infinitely, like this:

.slider{
    width:700px;
    height:300px;
     margin:50px auto;
    border:1px solid;
    overflow:hidden;
}
.slides{
    width:400%;
     height:100%;
     -webkit-animation:slide 16s infinite;
     -moz-animation:slide 16s infinite;
     animation:slide 16s infinite;
}
.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{
    0%,100% {
        margin-left:0%;
    }

    12% {
        margin-left:0%;
    }

    24% {
        margin-left:-100%;
    }

    36% {
        margin-left:-100%;
    }

    48% {
        margin-left:-200%;
    }

    60% {
        margin-left:-200%;
    }

    72% {
        margin-left:-300%;
    }

    84% {
        margin-left:-300%;  
    }
}
@-moz-keyframes slide{
    0%,100% {
        margin-left:0%;
    }

    12% {
        margin-left:0%;
    }

    24% {
        margin-left:-100%;
    }

    36% {
        margin-left:-100%;
    }

    48% {
        margin-left:-200%;
    }

    60% {
        margin-left:-200%;
    }

    72% {
        margin-left:-300%;
    }

    84% {
        margin-left:-300%;  
    }
}
@keyframes slide{
    0%,100% {
        margin-left:0%;
    }

    12% {
        margin-left:0%;
    }

    24% {
        margin-left:-100%;
    }

    36% {
        margin-left:-100%;
    }

    48% {
        margin-left:-200%;
    }

    60% {
        margin-left:-200%;
    }

    72% {
        margin-left:-300%;
    }

    84% {
        margin-left:-300%;  
    }
}

<div class="slider">
    <div class="slides">
        <div class="slider-1"></div>
        <div class="slider-2"></div>
        <div class="slider-3"></div>
        <div class="slider-4"></div>
    </div>
</div>

Here is a JSFiddle: http://jsfiddle.net/1kcbpqfu/2/

EDIT: The percentages are calculated by

Time_of_property_change/Time_of_whole_animation

It means, if I want an 10 second animation, with a transition between frames in 3s with a 2s of duration, and in 8s back to the fist position, the CSS animation frame should look like:

0%, 100% { /* Beggining and end of animation */
    margin-left: 0%;
}

30% { /* Beggining of transition
    margin-left: 0%; /* Until 3 seconds, keep same frame */
}

50% { /* End of transition */
    margin-left: -100%; /* in 5 seconds, finish animation

80% { /* In 8 seconds, start transition to first frame */
    margin-left: -100%;
}