Skip to main content
se eliminaron 6 caracteres en el cuerpo
Origen Enlace

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>

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>

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>

Origen Enlace

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>