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

Question

I want to use the advantage of the css animation ability of doing infinite action to control the child I target each time in a different value THEN at some point go back to the zero and so.
Lets say I want to color the background of a group of 3 DIVs, So the CSS code will be:
<style>
div:nth-of-type(1){
-webkit-animation:coloring 2s infinite;
}
#-webkit-keyframes coloring{
from {background:red;}
to {background:yellow;}
}
<style>
So as long as I used infinite property it will go forever and here I want to increase the value of nth-of-type each time in a row (1,2,3) then when reaching the 3 it will back to 1

Answer 1

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

Answer 2

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.

Answer 3

I was reviewing my questions and I wanted to share a different approach to achieve this with pure CSS:
#keyframes coloring {
0% {
background:red;
}
25% {
background:yellow;
}
33% {
background:#ccc;
}
75% {
background:#ccc;
}
100%{
background:#ccc;
}
}
.div {
height:50px;
background:#ccc;
}
.first {
-webkit-animation:coloring 9s ease-out 0s infinite;
animation:coloring 9s ease-out 0s infinite;
-moz-animation:coloring 9s ease-out 0s infinite;
-webkit-animation:coloring 9s ease-out 0s infinite;
}
.second {
-webkit-animation:coloring 9s ease-out 3s infinite;
animation:coloring 9s ease-out 3s infinite;
-moz-animation:coloring 9s ease-out 3s infinite;
-webkit-animation:coloring 9s ease-out 3s infinite;
}
.third {
-webkit-animation:coloring 9s ease-out 6s infinite;
animation:coloring 9s ease-out 6s infinite;
-moz-animation:coloring 9s ease-out 6s infinite;
-webkit-animation:coloring 9s ease-out 6s infinite;
}
<div class="div first"></div>
<div class="div second"></div>
<div class="div third"></div>