Para las animaciones realizadas en CSS , se pueden agregar EventListeners que se activan en los eventos de animationstart , animationiteration y animationend .

 @keyframes jumping-dot { 0% { transform: 'translateY(0px)' } 50% { transform: 'translateY(-100px)' } 100% { transform: 'translateY(0px)' } } #dot { animation: jumping-dot 1s ease-in-out 1; position: relative; width: 50px; height: 50px; left: 50%; margin-left: -25px; border-radius: 50%; top: 100%; margin-top: -50px; background-color: red; }

 const animationElement = document.getElementById('dot') animationElement.addEventListener('animationstart', function () { console.log('Animation started') }) animationElement.addEventListener('animationend', function () { const animationEndTime = window.performance.now() console.log('Animation ended') }) animationElement.addEventListener('animationiteration', function () { console.log('Animation iteration ended') })

Sin embargo, si la animación se crea a través de JS en lugar de CSS, los mismos EventListeners no se activarán.

 const animationHandler = animationElement.animate( [ { transform: 'translateY(0px)' }, { transform: 'translateY(-100px)', easing: 'ease-out' }, { transform: 'translateY(0px)', easing: 'ease-in' } ], { duration: 1000, iterations: 1 } )

¿Alguna idea, cómo adjuntar estos EventListeners correctamente?