Element : évènement animationstart

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis décembre 2019.

En savoir plus
Voir la compatibilité complète

L'évènement animationstart est déclenché lorsqu'une animation CSS commence. S'il y a un animation-delay, cet évènement est déclenché une fois la période de retard écoulée. Un retard négatif provoque le déclenchement de l'évènement avec un elapsedTime égal à la valeur absolue du retard (et, par conséquent, l'animation commence à ce moment dans la séquence).

Syntaxe

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

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

onanimationstart = (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 du temps pendant lequel l'animation était en pause. Pour un évènement animationstart, elapsedTime vaut 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'exécute. Si l'animation ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne de caractères vide : ''.

Exemples

Cet exemple écoute l'évènement animationstart et affiche un message lorsqu'il est déclenché :

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

animate.addEventListener("animationstart", () => {
  console.log("Début de l'animation");
});

Identique, mais en utilisant la propriété onanimationstart :

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

animate.onanimationstart = () => {
  console.log("Début de l'animation");
};

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

Compatibilité des navigateurs

Voir aussi

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

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