Personalmente, si la animación que buscas es siempre la misma, usaría un gif animado. Te ahorras código y problemas.
Si te hace gracia hacerlo con JS, pon cada punto en un objeto distinto con la propiedad CSS position:relative y juega con su propiedad top.
Algo parecido a esto:
var ondas=[0,1,2,3,4,5,6,7,6,5,4,3,2,1];
var dots=document.getElementsByClassName("dot");
var indices=[];
for (var i=0; i<dots.length;i++)
indices.push(Math.floor(ondas.length/dots.length*i));
function bucle(){
for (var i=0; i<dots.length;i++) {
var j=indices[i];
dots[i].style.top=ondas[j]+"px";
if (++j>=ondas.length) j=0;
indices[i]=j;
}
requestAnimationFrame(bucle);
}
requestAnimationFrame(bucle);
.dot {position:relative};
<div>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
</div>