animationendEvento

Ejemplo

Agregar un evento de escucha al elemento <div> al final de la animación CSS:

var x = document.getElementById("myDIV");

// Código para Chrome, Safari y Opera
x.addEventListener("webkitAnimationEnd", myStartFunction);

// Sintaxis estándar
x.addEventListener("animationend", myStartFunction);

Pruébalo »

Definición y uso

El evento animationend se dispara cuando se completa la animación CSS.

Para obtener más información sobre animaciones CSS, consulte nuestroAnimaciones CSS3capítulo.

Cuando se reproduce una animación CSS, ocurren los siguientes tres eventos:

animationstart- Se dispara cuando comienza la animación CSS
animationiteration- Se dispara cuando la animación CSS se repite
animationend - Se dispara cuando se completa la animación CSS

Soporte del navegador

Los números en la tabla indican la versión del primer navegador que admite el evento.

El número especificado después de "webkit" o "moz" es el prefijo de la primera versión que admite el evento.

Evento
animationend	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

Nota:Los navegadores Chrome, Safari y Opera usan el prefijo webkitAnimationEnd.

Sintaxis

object.addEventListener("webkitAnimationEnd", myScript); // Chrome, Safari y Opera
object.addEventListener("animationend", myScript); // Sintaxis estándar

Nota:Internet Explorer 8 y versiones anteriores de IE no admitenaddEventListener()el método.

Detalles técnicos