Evento de fin de animación
Ejemplo
Haga algo con un elemento <div> cuando finalice una animación CSS:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definición y uso
El evento animationend ocurre cuando se completa una animación CSS.
Para obtener más información sobre animaciones CSS, consulte nuestro tutorial sobre animaciones CSS3 .
Cuando se reproduce una animación CSS, pueden ocurrir tres eventos:
- animationstart : ocurre cuando la animación CSS ha comenzado
- animationiteration : ocurre cuando se repite la animación CSS
- animationend: ocurre cuando la animación CSS se ha completado
Compatibilidad con 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 de "webkit" o "moz" especifican la primera versión que funcionó con un prefijo.
| Event | |||||
|---|---|---|---|---|---|
| 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, use el prefijo webkitAnimationEnd.
Sintaxis
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | sí |
|---|---|
| Cancelable: | No |
| Tipo de evento: | AnimaciónEvento |
| Versión DOM: | Eventos de nivel 3 |
páginas relacionadas
Tutorial CSS: Animaciones CSS3
Referencia CSS: propiedad de animación CSS3
Referencia HTML DOM: propiedad de animación de estilo