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 ⁨diciembre de 2019⁩.

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

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

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

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

Véase también

Animaciones CSS
Uso de animaciones CSS
AnimationEvent
Eventos relacionados: animationstart, animationcancel, animationiteration

Help improve MDN

Learn how to contribute

This page was last modified on ⁨25 ago 2023⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content