Nice looking scrolling button effect.

<style type="text/css">

#down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
 opacity:0;
border-top: 20px solid #f00;
}

#down1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

#down2 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

@-webkit-keyframes anim{
from{opacity:0;}
to{opacity:1;}
}

#down{
-webkit-animation:anim 3s;
 -webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim2{
from{opacity:0;}
to{opacity:1;}
}

#down1{
-webkit-animation:anim2 3s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim3{
from{opacity:0;}
to{opacity:1;}
}

#down2{
-webkit-animation:anim 3s;
-webkit-animation-delay:3s;  
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

</style>

<button>
<div id="down"></div>
<div id="down1"></div>
<div id="down2"></div>
</button>

Output :)