Element: animationcancel event
==============================

The **`animationcancel`** event is fired when a CSS Animation unexpectedly aborts. In other words, any time it stops running without sending an `animationend` event. This might happen when the `animation-name` is changed such that the animation is removed, or when the animating node is hidden using CSS. Therefore, either directly or because any of its containing nodes are hidden.

An event handler for this event can be added by setting the `onanimationcancel` property, or using `addEventListener()`.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

onanimationcancel = (event) => {};
```

Event type
----------

An `AnimationEvent`. Inherits from `Event`.

Event

AnimationEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`AnimationEvent.animationName` Read only 

A string containing the value of the `animation-name` that generated the animation.

`AnimationEvent.elapsedTime` Read only 

A `float` giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an `animationstart` event, `elapsedTime` is `0.0` unless there was a negative value for `animation-delay`, in which case the event will be fired with `elapsedTime` containing `(-1 * delay)`.

`AnimationEvent.pseudoElement` Read only 

A string, starting with `'::'`, containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: `''`.

Examples
--------

This code gets an element that's currently being animated and adds a listener to the `animationcancel` event. It then sets the element's `display` property to `none`, which will trigger the `animationcancel` event.


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

animated.addEventListener("animationcancel", () => {
  console.log("Animation canceled");
});

animated.style.display = "none";
```


The same, but using the `onanimationcancel` property instead of `addEventListener()`:


```js
const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
  console.log("Animation canceled");
};

animated.style.display = "none";
```

### Live example

#### HTML


```html
<div class="animation-example">
  <div class="container">
    <p class="animation">You chose a cold night to visit our planet.</p>
  </div>
  <button class="activate" type="button">Activate animation</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 {
    transform: translateX(100%) scaleX(3);
  }
  to {
    transform: translateX(0) scaleX(1);
  }
}
```


#### 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}'animation started' `;
});

animation.addEventListener("animationiteration", () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});

animation.addEventListener("animationend", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove("active");
  applyAnimation.textContent = "Activate animation";
});

animation.addEventListener("animationcancel", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});

applyAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
  animationEventLog.textContent = "";
  iterationCount = 0;
  const active = animation.classList.contains("active");
  applyAnimation.textContent = active
    ? "Cancel animation"
    : "Activate animation";
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Animations
* Using CSS Animations
* `AnimationEvent`
* Related events: `animationstart`, `animationend`, `animationiteration`