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.

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

onanimationend = (event) => {};

Tipo de evento

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 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 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animationend event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también