animationend Evento

Ejemplo

Hacer algo con un <div> elemento cuando una animación CSS ha terminado:

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

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);

// Standard syntax
x.addEventListener("animationend", myEndFunction);

Inténtalo tú mismo "

Definición y Uso

El evento animationend se produce cuando una animación CSS ha completado.

Para obtener más información acerca de CSS Animaciones, consulte nuestro tutorial sobre CSS3 Animaciones .

Cuando una animación CSS juega, hay tres eventos que pueden ocurrir:

animationstart - se produce cuando la animación CSS ha comenzado
animationiteration - se produce cuando se repite la animación CSS
animationend - se produce cuando la animación CSS ha completado

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el evento.

Los números seguidos por "webkit" o "moz" especifican la primera versión que trabajó con un prefijo.

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

Nota: Para Chrome, Safari y Opera, utilice el prefijo webkitAnimationEnd.

Sintaxis

object.addEventListener("webkitAnimationEnd", myScript ); // Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript ); // Standard syntax

Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.