Element: Evento animationend
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
El evento animationend
se activa cuando se completa una Animación CSS. Si la animación se aborta antes de llegar a su finalización, como si el elemento se elimina del DOM o la animación se elimina del elemento, el evento animationend
no se activa.
Sintaxis
Utilice el nombre del evento en métodos como addEventListener()
, o establezca una propiedad de manejador de eventos.
addEventListener("animationend", (event) => {});
onanimationend = (event) => {};
Tipo de evento
Un AnimationEvent
. Hereda de Event
.
Propiedades del evento
También hereda propiedades de su padre Event
.
AnimationEvent.animationName
Read only-
Una cadena que contiene el valor del
animation-name
que generó la animación. AnimationEvent.elapsedTime
Read only-
Un
float
que indica la cantidad de tiempo que la animación se ha estado ejecutando, en segundos, cuando se disparó este evento, excluyendo cualquier momento en que la animación estuvo en pausa. Para un eventoanimationstart
,elapsedTime
es0.0
a menos que haya un valor negativo paraanimation-delay
, en cuyo caso el evento se activará conelapsedTime
que contiene(- 1 * retraso)
. AnimationEvent.pseudoElement
Read only-
Una cadena, que comienza con
'::'
, que contiene el nombre del pseudo-elemento en el que se ejecuta la animación. Si la animación no se ejecuta en un pseudoelemento sino en el elemento, una cadena vacía:''
.
Ejemplos
Este ejemplo obtiene un elemento que está siendo animado y detecta el evento animationend
:
const animated = document.querySelector(".animated");
animated.addEventListener("animationend", () => {
console.log("Animación finalizada");
});
Lo mismo, pero usando la propiedad del manejador de eventos onanimationend
:
const animated = document.querySelector(".animated");
animated.onanimationend = () => {
console.log("Animación finalizada");
};
Ejemplo en vivo
HTML
<div class="animation-example">
<div class="container">
<p class="animation">
Elegiste una noche fría para visitar nuestro planeta.
</p>
</div>
<button class="activate" type="button">Activar animación</button>
<div class="event-log"></div>
</div>
CSS
.container {
height: 3rem;
}
.event-log {
width: 25rem;
height: 2rem;
border: 1px solid black;
margin: 0.2rem;
padding: 0.2rem;
}
.animation.active {
animation-duration: 2s;
animation-name: slidein;
animation-iteration-count: 2;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
JavaScript
const animation = document.querySelector("p.animation");
const animationEventLog = document.querySelector(
".animation-example>.event-log",
);
const applyAnimation = document.querySelector(
".animation-example>button.activate",
);
let iterationCount = 0;
animation.addEventListener("animationstart", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animación iniciada' `;
});
animation.addEventListener("animationiteration", () => {
iterationCount++;
animationEventLog.textContent = `${animationEventLog.textContent}'iteraciones de la animación: ${iterationCount}' `;
});
animation.addEventListener("animationend", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animación terminada'`;
animation.classList.remove("active");
applyAnimation.textContent = "Activar animación";
});
animation.addEventListener("animationcancel", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animación cancelada'`;
});
applyAnimation.addEventListener("click", () => {
animation.classList.toggle("active");
animationEventLog.textContent = "";
iterationCount = 0;
const active = animation.classList.contains("active");
applyAnimation.textContent = active
? "Cancelar animación"
: "Activar animación";
});
Resultado
Especificaciones
Specification |
---|
CSS Animations Level 1 # eventdef-globaleventhandlers-animationend |
Browser compatibility
BCD tables only load in the browser
Véase también
- Animaciones CSS
- Uso de animaciones CSS
AnimationEvent
- Eventos relacionados:
animationstart
,animationcancel
,animationiteration