animationend Event
Beispiel
Tun Sie etwas mit einem <div>-Element, wenn eine CSS-Animation beendet ist:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definition und Verwendung
Das animationend-Ereignis tritt ein, wenn eine CSS-Animation abgeschlossen ist.
Weitere Informationen zu CSS-Animationen finden Sie in unserem Tutorial zu CSS3-Animationen .
Beim Abspielen einer CSS-Animation können drei Ereignisse eintreten:
- animationstart - tritt auf, wenn die CSS-Animation gestartet wurde
- Animationiteration - tritt auf, wenn die CSS-Animation wiederholt wird
- animationend – tritt auf, wenn die CSS-Animation abgeschlossen ist
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Ereignis vollständig unterstützt.
Zahlen gefolgt von "webkit" oder "moz" geben die erste Version an, die mit einem Präfix funktioniert hat.
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Hinweis: Verwenden Sie für Chrome, Safari und Opera das Präfix webkitAnimationEnd.
Syntax
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
Hinweis: Die Methode addEventListener() wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Technische Details
Bläschen: | ja |
---|---|
kündbar: | Nein |
Ereignistyp: | AnimationEvent |
DOM-Version: | Ereignisse der Ebene 3 |
Verwandte Seiten
CSS-Tutorial: CSS3-Animationen
CSS-Referenz: CSS3-Animationseigenschaft
HTML-DOM-Referenz: Style-Animation-Eigenschaft