no se si se error mio, o se hizo así para hacer el ejercicio rapido, pero al hacer el problema igual que Alvaro, me percato que al activar el evento por segunda o tercera vez, este se realiza múltiples veces en una misma acción

desconozco si esto pueda ser malo para el rendimiento de una pagina ya que se activaría múltiples veces para hacer una cosa

(el codigo lo tuve que realizar con el propertyName ya que elapsedTime me marcaba todos los tiempos iguales

//ejer1 hace referencia a un contenedor invisible para al hacerle click en la blita se de realmente a este contenedor
bolita = ejer1.querySelector('.bolita1');
//btnBolita refiere al btn para activar
btnBolita.addEventListener("click", () => {

   bolita.classList.add('bolita1Animate')

   bolita.addEventListener('transitionend', e => {
       console.log(e.propertyName) // me indicara cuantas veces se activo
       if (e.propertyName == 'top') bolita.classList.remove('bolita1Animate')
   });
})

lo que hice para solucionar esa multiple activacion fue poner el if dentro de una funtion y no hacer el evento 'transitionend' de manera anonima

function animation(e){
   console.log(e.propertyName) // me indicara cuantas veces se activo
   if (e.propertyName == 'top') bolita.classList.remove('bolita1Animate')
}

bolita = ejer1.querySelector('.bolita1');

btnBolita1.addEventListener("click", () => {

   bolita.classList.add('bolita1Animate')
   bolita.addEventListener('transitionend', animation);
})