animationiteration Event
Beispiel
Machen Sie etwas mit einem <div>-Element, wenn eine CSS-Animation wiederholt wird:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definition und Verwendung
Das Ereignis animationiteration tritt auf, wenn eine CSS-Animation wiederholt wird.
Wenn die CSS -Eigenschaft animation-iteration-count auf „1“ gesetzt ist, was bedeutet, dass die Animation nur einmal abgespielt wird, tritt das Ereignis animationiteration nicht auf. Die Animation muss mehr als einmal ausgeführt werden, damit dieses Ereignis ausgelöst wird.
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 | |||||
---|---|---|---|---|---|
animationiteration | 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 webkitAnimationIteration.
Syntax
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", 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
CSS-Referenz: CSS3-Eigenschaft animation-iteration-count
HTML-DOM-Referenz: Style-Animation-Eigenschaft