Question: I was looking around for solution of my problem and tried to solve it with animation css3 or setInterval but with no effect

**WHAT I WANT ACCOMPLISH?**

I want to make this animation as loader, it mean's loop it indefinitely
This is logo which i want to fadeIn and Out one by one clockwise.

Why setInterval does not work? 
Because each animation is with dealay and each repeat delay does not apply.

```
function runIt() {
    var time = 600;
    $(".first").fadeIn(time).fadeOut(time);
    $(".second").delay(time).fadeIn(time).fadeOut(time);
    $(".third").delay(time*2).fadeIn(time).fadeOut(time);
    $(".fourth").delay(time*3).fadeIn(time).fadeOut(time);
   };
runIt();

```

[EXAMPLE CODEPEN](http://codepen.io/SzymonDziewonski/pen/dGkaD)

**Any help would be appreciate a LOT! :)**

**SOLUTION FOR ALL WHO WILL HAVE SAME PROBLEM:**

```
            function runIt() {
                var time = 600;
                $(".first").fadeIn(time).fadeOut(time, function(){
                    $(".second").fadeIn(time).fadeOut(time, function(){
                        $(".third").fadeIn(time).fadeOut(time, function(){
                            $(".fourth").fadeIn(time).fadeOut(time, runIt); 
                        });
                    });
                });

            };
            runIt();

```

Answer: 
You could use `setInterval`, but probably a cleaner solution would be to call `runIt` again from the callback of the final animation:

```
function runIt() {
    var time = 600;
    $(".first").fadeIn(time).fadeOut(time);
    $(".second").delay(time).fadeIn(time).fadeOut(time);
    $(".third").delay(time*2).fadeIn(time).fadeOut(time);
    $(".fourth").delay(time*3).fadeIn(time).fadeOut(time, runIt); // call runIt when fadeOut completes
};
runIt();

```
SetInterval works. You need to call the function before the interval starts:

```
runIt();

setInterval(function() {
  runIt();
}, 3600);

```

CodePen example [here](http://cdpn.io/dGkaD).