Beispiel
Tun Sie etwas mit einem <div> Elemente , 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); Versuch es selber " Definition und Verwendung
Das animationiteration Ereignis tritt auf, wenn eine CSS-Animation wiederholt wird.
Wenn die CSS animationiteration-count Eigenschaft gesetzt "1" bedeutet, dass die Animation nur einmal abgespielt wird, wird das animationiteration Ereignis nicht auftreten. Die Animation muss mehr als einmal für dieses Ereignis laufen zu schießen.
Weitere Informationen über CSS Animationen finden Sie in unserem Tutorial auf CSS3 Animationen .
Wenn ein CSS-Animation spielt, gibt es drei Ereignisse, die auftreten können:
- animationstart - tritt auf, wenn die CSS - Animation gestartet
- animationiteration - tritt auf, wenn die CSS-Animation wiederholt wird
- animationend - tritt auf, wenn die CSS - Animation abgeschlossen
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die das Ereignis vollständig unterstützt.
Zahlen , gefolgt von "webkit" oder "moz" geben Sie die erste Version , die mit einem Präfix gearbeitet.
| Event | |||||
|---|---|---|---|---|---|
| animationiteration | 4.0 webkit | 10.0 | 16.0 5,0 moz | 4.0 webkit | 15,0 webkit 12.1 |
Hinweis: Für Chrome, Safari und Opera, verwenden Sie den webkitAnimationIteration Präfix.
Syntax
object.addEventListener("webkitAnimationIteration", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationiteration", myScript );
// Standard syntax
Hinweis: Die addEventListener() Methode wird nicht unterstützt in Internet Explorer 8 und früheren Versionen.
Technische Details
| Blasen: | Ja |
|---|---|
| Es fällt eine Pauschale: | Nein |
| Event-Typ: | AnimationEvent |
| DOM Version: | Level 3 Veranstaltungen |
Verwandte Seiten
CSS Tutorial: CSS3 Animationen
CSS Referenz: CSS3 animation Property
CSS Referenz: CSS3 animation-iteration-count Property - CSS3 animation-iteration-count Property
HTML - DOM - Referenz: Style animation Property
<Ereignisobjekt