Problema con addEventListener!

[berkeleyPunk]

No se me ocurrió una forma sucinta de referenciar mi problema en un título. Perdón.

La idea es esta:
Tengo 3 divs: dos en forma de cuadro y el otro en círculo. Quisiera que al darle clic a un cuadrado se traslade el círculo 100px en Y. Y que al darle clic al otro cuadrado se repita la acción, a saber, que el mismo círculo se mueva desde donde estaba originalmente y corra los mismos 100px en Y.

El código que tengo no hace lo que quiero, porque al darle click al 2do cuadrado, el círculo ya está 100px en Y. ¿Cómo se le hace para que de alguna manera se reinicie la función que mueve el círculo?

Aquí el código que llevo:

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;}
 

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.WebkitTransform = "translateY(100px)";
  }
}
 

Código HTML:

<div id="caja1">Caja 1</div>
  <div id="caja2">Caja 2</div>
 
  <div id="bola"></div>
 

Estuve googleando y vi que quizá, talvez, el removeEventListener sirva a mi propósito, pero el caso es que no he logrado hacer que funcione.
Ya intenté hacerlo con animaciones CSS, de modo que cuando se dé clic se anime la ida. El resultado de esto es que sólo se anima la ida en el 1er clic. En el 2do clic ya no se anima nada. Imagino que porque la bola ya está en el destino y no en el origen. ¿Pero cómo hacer que a cada clic, se reinicie el movimiento de la bola?

Alguna idea?

Saludos cordiales