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

AnimationEventPropiedades 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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Animaciones CSS
* Uso de animaciones CSS
* `AnimationEvent`
* Eventos relacionados: `animationstart` (en-US), `animationcancel` (en-US), `animationiteration` (en-US)