Element : évènement animationcancel

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

En savoir plus
Voir la compatibilité complète

L'évènement animationcancel est déclenché lorsqu'une animation CSS est interrompue de manière inattendue. En d'autres termes, chaque fois qu'elle cesse de s'exécuter sans envoyer d'évènement animationend. Cela peut se produire lorsque la propriété animation-name est modifiée de telle sorte que l'animation est supprimée, ou lorsque le nœud animé est masqué à l'aide de CSS. Donc, soit directement, soit parce que l'un de ses nœuds contenant est masqué.

Un gestionnaire d'évènement pour cet évènement peut être ajouté en définissant la propriété onanimationcancel, ou en utilisant addEventListener().

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("animationcancel", (event) => { })

onanimationcancel = (event) => { }

Type d'évènement

Un objet AnimationEvent. Hérite de l'objet Event.

Propriétés de l'évènement

Hérite également des propriétés de son parent Event.

AnimationEvent.animationName Lecture seule: Une chaîne de caractères contenant la valeur de la propriété animation-name qui a généré l'animation.
AnimationEvent.elapsedTime Lecture seule: Un float indiquant la durée pendant laquelle l'animation a été exécutée, en secondes, lorsque cet évènement a été déclenché, à l'exclusion de tout temps pendant lequel l'animation était en pause. Pour un évènement animationstart, elapsedTime est 0.0 sauf s'il y avait une valeur négative pour animation-delay, auquel cas l'évènement est déclenché avec elapsedTime contenant (-1 * delay).
AnimationEvent.pseudoElement Lecture seule: Une chaîne de caractères, commençant par '::', contenant le nom du pseudo-élément sur lequel l'animation s'applique. Si l'animation ne s'applique pas à un pseudo-élément mais à l'élément lui-même, une chaîne de caractères vide : ''.

Exemples

Ce code obtient un élément qui est actuellement en cours d'animation et ajoute un écouteur pour l'évènement animationcancel. Il définit ensuite la propriété display de l'élément sur none, ce qui déclenche l'évènement animationcancel.

const anime = document.querySelector(".anime");

anime.addEventListener("animationcancel", () => {
  console.log("Animation annulée");
});

anime.style.display = "none";

Identique, mais en utilisant la propriété onanimationcancel à la place de addEventListener() :

const anime = document.querySelector(".anime");
anime.onanimationcancel = () => {
  console.log("Animation annulée");
};

anime.style.display = "none";

Exemple interactif

HTML

html

<div class="exemple-animation">
  <div class="conteneur">
    <p class="animation">
      Vous avez choisi une nuit froide pour venir sur notre planète.
    </p>
  </div>
  <button class="activer" type="button">Activer l'animation</button>
  <div class="journal-event"></div>
</div>

CSS

css

.conteneur {
  height: 3rem;
}

.journal-event {
  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 journalEventAnimation = document.querySelector(
  ".exemple-animation>.journal-event",
);
const appliquerAnimation = document.querySelector(
  ".exemple-animation>button.activer",
);
let compteIteration = 0;

animation.addEventListener("animationstart", () => {
  journalEventAnimation.textContent = `${journalEventAnimation.textContent}'début de l'animation' `;
});

animation.addEventListener("animationiteration", () => {
  compteIteration++;
  journalEventAnimation.textContent = `${journalEventAnimation.textContent}'itération de l'animation : ${compteIteration}' `;
});

animation.addEventListener("animationend", () => {
  journalEventAnimation.textContent = `${journalEventAnimation.textContent}'fin de l'animation'`;
  animation.classList.remove("active");
  appliquerAnimation.textContent = "Activer l'animation";
});

animation.addEventListener("animationcancel", () => {
  journalEventAnimation.textContent = `${journalEventAnimation.textContent}'animation annulée'`;
});

appliquerAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
  journalEventAnimation.textContent = "";
  compteIteration = 0;
  const active = animation.classList.contains("active");
  appliquerAnimation.textContent = active
    ? "Annuler l'animation"
    : "Activer l'animation";
});

Résultat

Spécifications

Spécification
CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel

Compatibilité des navigateurs

Voir aussi

Les animations CSS
Utiliser les animations CSS
L'interface AnimationEvent
Évènements associés : animationstart, animationend, animationiteration

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 11 juil. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu