Element: animationcancel event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Theanimationcancel event is fired when aCSS Animation unexpectedly aborts. In other words, any time it stops running without sending ananimationend event. This might happen when theanimation-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 theonanimationcancel property, or usingaddEventListener().
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("animationcancel", (event) => { })onanimationcancel = (event) => { }Event type
AnAnimationEvent. Inherits fromEvent.
Event properties
Also inherits properties from its parentEvent.
AnimationEvent.animationNameRead onlyA string containing the value of the
animation-namethat generated the animation.AnimationEvent.elapsedTimeRead onlyA
floatgiving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For ananimationstartevent,elapsedTimeis0.0unless there was a negative value foranimation-delay, in which case the event will be fired withelapsedTimecontaining(-1 * delay).AnimationEvent.pseudoElementRead onlyA string, starting with
'::', containing the name of thepseudo-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 theanimationcancel event. It then sets the element'sdisplay property tonone, which will trigger theanimationcancel event.
const animated = document.querySelector(".animated");animated.addEventListener("animationcancel", () => { console.log("Animation canceled");});animated.style.display = "none";The same, but using theonanimationcancel property instead ofaddEventListener():
const animated = document.querySelector(".animated");animated.onanimationcancel = () => { console.log("Animation canceled");};animated.style.display = "none";Live example
HTML
<div> <div> <p>You chose a cold night to visit our planet.</p> </div> <button type="button">Activate animation</button> <div></div></div>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: slide-in; animation-iteration-count: 2;}@keyframes slide-in { from { transform: translateX(100%) scaleX(3); } to { transform: translateX(0) scaleX(1); }}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}'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 |