Element: Evento animationend

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.

js
addEventListener("animationend", (event) => {});

onanimationend = (event) => {};

Tipo de evento

Un AnimationEvent. Hereda de Event.

Event AnimationEvent

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 (en-US) 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 evento animationstart, elapsedTime es 0.0 a menos que haya un valor negativo para animation-delay, en cuyo caso el evento se activará con elapsedTime que contiene (- 1 * retraso).

AnimationEvent.pseudoElement (en-US) 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:

js
const animated = document.querySelector(".animated");

animated.addEventListener("animationend", () => {
  console.log("Animación finalizada");
});

Lo mismo, pero usando la propiedad del manejador de eventos onanimationend:

js
const animated = document.querySelector(".animated");

animated.onanimationend = () => {
  console.log("Animación finalizada");
};

Ejemplo en vivo

HTML

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

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

js
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