Question: I'd like to achieve something [like this](http://roblutter.com) (fading animated arrow at the bottom of the header picture indicating that the user needs to scroll down).
In order to to this I'm planning to use the code below.
The issue is that the animation only plays 1x whereas I would like it to play continuously (in a way that wouldn't take too much resource). See <http://jsfiddle.net/ZN3aD/>

```
$('.icon').css('display', 'block');
$('.icon').animate({ opacity: 1 }, 0);
$('.icon').animate({ opacity: 0, top: "100px" }, 'slow');

```

Answer: 
I would recommend you to use CSS animation:

```
.icon {
    ...
    -webkit-animation: icon 1.2s infinite;
    animation: icon 1.2s infinite;
}

@-webkit-keyframes icon {
    from {
        opacity: 1;
        top: 80px;
    }
    to {
        opacity: 0;
        top: 100px;
    }
}
@keyframes icon {
    from {
        opacity: 1;
        top: 80px;
    }
    to {
        opacity: 0;
        top: 100px;
    }
}

```

It will work in IE10+.

### Demo: <http://jsfiddle.net/ZN3aD/6/>

If you anyway want old browsers support then take a look at James Donnelly answer. Or you can use this code snippet:

```
(function animate() {
    $('.icon').animate({ opacity: 1, top: 80 }, 0)
    .animate({ opacity: 0, top: 100 }, 'slow', animate);
})();

```

### Demo: <http://jsfiddle.net/ZN3aD/8/>
This should do the trick. Adding setInterval will repeat the animation placed inside function:

```
     function runAnimation(){

     $('.icon').css('display', 'block');
     $('.icon').animate({ opacity: 1 }, 0);
     $('.icon').animate({ opacity: 0, top: "100px" }, 'slow');

                }

var interval = setInterval(runAnimation,1000);

```