CSS animation, is it possible to loop between multiple elements?

Very interesting question. But i don't think CSS support a loop function.

:nth-of-type() can calculate different index but the results will be disabled as one array selection:

:nth-of-type(0,1,2,3). This doesn't support any iteration, all the elements will be selected at once.

This is however possible in javascript/jQuery, as it supports iterations:

var count = 0;
var delay = 0;
$('div').each(function()
{
  $('div:eq(' + count +')').delay(delay)
  .queue(function()
         { 
            $(this).css('background', 'yellow');
         })
  count++;
  delay += 500;
})

It will iterate every div element. Whith the .eq() selector, every element based on the index value will be selected, this way every element is selected one by one.

Normally this would excecute in seconds, so you wouldn't see the effect of "one-by-one".

I used a delay() to have a delay on the selector, where the delay will be increased at every iteration. In this case after every half second a new .queue() will be added so the each function will not iterate before the queue has been finished.

combined this with the css transition to get the fade-in effect:

transition: background 2s;
-webkit-transition: background 2s; /* Safari */

jsFiddle

Try this:

HTML:

<div class="div active"></div>
<div class="div"></div>
<div class="div"></div>

CSS:

.active {
    -webkit-animation:coloring 3s;
}

JS:

var len = $(".div").length;
setTimeout(function () {
    change_bg();
},3000);
function change_bg() {
    var index = $(".active").index(); // get index of active div
    var current;
    $(".active").removeClass("active");
    if (index == len - 1) { // check if active div is last
        current = 0; // if last then start from first
    } else {
        current = index + 1; // increment otherwise
    }
    $(".div:eq(" + current + ")").addClass("active"); //change background of next div
    setTimeout(function () { //recursive calling
        change_bg();
    },3000);

}

Fiddle here.