Evento animationend
Definición y uso
El evento animationend se desencadena cuando finaliza la animación CSS.
Para obtener más información sobre las animaciones CSS, aprenda nuestra Tutorial de animación CSS3.
Tres eventos pueden ocurrir cuando se reproduce la animación CSS：
- animationstart - Se desencadena cuando comienza la animación CSS
- animationiteration - Se desencadena cuando se repite la animación CSS
- animationend - Se desencadena cuando finaliza la animación CSS
Ejemplo
Haga algo con el elemento <div> cuando finalice la animación CSS：
var x = document.getElementById("myDIV");
// Código para Chrome, Safari y Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Sintaxis estándar
x.addEventListener("animationend", myEndFunction);
Sintaxis
object.addEventListener("webkitAnimationEnd", myScript); // Código para Chrome, Safari y Opera
object.addEventListener("animationend", myScript); // Sintaxis estándar
Notas:Internet Explorer 8 o versiones anteriores no lo admiten Método addEventListener().
Detalles técnicos
| Burbujeante： | Admitido |
|---|---|
| Cancelable： | No admitido |
| Tipo de eventos： | Evento AnimationEvent |
| Versión de DOM： | Nivel 3 de eventos |
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite completamente el evento.
El número después de "webkit" o "moz" indica la primera versión del prefijo utilizado.
| Eventos | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Notas:Para Chrome, Safari y Opera, utilice webkitAnimationEnd.
Páginas relacionadas
Tutorial de CSS：Animación CSS3
Manual de referencia del CSS:Atributo animation del CSS3
Manual de referencia del DOM HTML:Atributo animation del estilo
