Element : évènement animationend
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.
L'évènement animationend est déclenché lorsqu'une animation CSS est terminée. Si l'animation est interrompue avant d'être terminée, par exemple si l'élément est retiré du DOM ou si l'animation est supprimée de l'élément, l'évènement animationend n'est pas déclenché.
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("animationend", (event) => { })
onanimationend = (event) => { }
Type d'évènement
Un objet AnimationEvent. Hérite de l'objet Event.
Exemples
Cet exemple obtient un élément qui est en cours d'animation et écoute l'évènement animationend :
const animate = document.querySelector(".animate");
animate.addEventListener("animationend", () => {
console.log("Fin de l'animation");
});
Identique, mais en utilisant la propriété onanimationend à la place de addEventListener() :
const animate = document.querySelector(".animate");
animate.onanimationend = () => {
console.log("Fin de l'animation");
};
Exemple interactif
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
.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-animationend |
Compatibilité des navigateurs
Voir aussi
- Les animations CSS
- Utiliser les animations CSS
- L'interface
AnimationEvent - Évènements associés :
animationstart,animationcancel,animationiteration