Problema con addEventListener!

[berkeleyPunk]

Iniciado por Alexis88

En ese caso, puedes darle inicialmente una posición cero, retardas unas milésimas de segundo la siguiente acción y luego haces bajar la bolita 100px...

Algo parecido se me había ocurrido inicialmente, pero no lo hice porque, te comento, creía que JS tenía una función especial para reiniciar todo. Así como pones el código se ejecuta bien. La bronca viene si le pones transiciones CSS para que se vea el movimiento, por ejemplo a #bola: -webkit-transition:all ease 1s;

Pero haciendo unos cambios, se logra ver la animación:

Código CSS:

#caja1, #caja2, #caja3 {display:inline-block; width:100px; height:100px; background-color:#999;}
#bola {
    width:100px;
    height:100px;
    background-color:black;
    border-radius:50px;
}
 
@-webkit-keyframes ida
{
    0%   {-webkit-transform:translateY(0px);}
    100% {-webkit-transform:translateY(100px);}
}
@-webkit-keyframes vuelta
{
    0%   {-webkit-transform:translateY(100px);}
    100% {-webkit-transform:translateY(0px);}
}
 

Código Javascript:

window.onload = function()
{
  caja1 = document.getElementById("caja1");
  caja2 = document.getElementById("caja2");
  bola  = document.getElementById("bola");
  
  caja1.addEventListener("click", moverBola, false);
  caja2.addEventListener("click", moverBola, false);
  
  
  function moverBola()
  {
      bola.style.WebkitAnimationName = 'vuelta';
      bola.style.WebkitAnimationDuration = '1ms';
      bola.style.WebkitAnimationTimingFunction = 'ease';
      bola.style.WebkitAnimationIterationCount = '1';
      bola.style.WebkitAnimationFillMode = 'forwards';
 
      setTimeout(function()
      {
          bola.style.WebkitAnimationName = 'ida';
          bola.style.WebkitAnimationDuration = '1s';
          bola.style.WebkitAnimationTimingFunction = 'ease';
          bola.style.WebkitAnimationIterationCount = '1';
          bola.style.WebkitAnimationFillMode = 'forwards';
          
      },1);
  }
}
 

Saludos!