animatieiteratie evenement
Voorbeeld
Doe iets met een <div>-element wanneer een CSS-animatie wordt herhaald:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definitie en gebruik
De gebeurtenis Animationiteration vindt plaats wanneer een CSS-animatie wordt herhaald.
Als de CSS -eigenschap animatie-iteratie-telling is ingesteld op "1", wat betekent dat de animatie slechts één keer wordt afgespeeld, vindt de gebeurtenis Animationiteration niet plaats. De animatie moet meer dan één keer worden uitgevoerd om dit evenement te activeren.
Zie onze tutorial over CSS3-animaties voor meer informatie over CSS-animaties .
Wanneer een CSS-animatie wordt afgespeeld, kunnen er drie gebeurtenissen plaatsvinden:
- animatiestart - treedt op wanneer de CSS-animatie is gestart
- animatieiteratie - treedt op wanneer de CSS-animatie wordt herhaald
- animatieend - treedt op wanneer de CSS-animatie is voltooid
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de gebeurtenis volledig ondersteunt.
Getallen gevolgd door "webkit" of "moz" geven de eerste versie aan die met een voorvoegsel werkte.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Opmerking: gebruik voor Chrome, Safari en Opera het voorvoegsel webkitAnimationIteration.
Syntaxis
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
bubbels: | Ja |
---|---|
Annuleerbaar: | Nee |
Evenementtype: | AnimatieEvenement |
DOM-versie: | Niveau 3 Evenementen |
Gerelateerde pagina's
CSS-zelfstudie: CSS3-animaties
CSS-referentie: CSS3-animatie-eigenschap
CSS-referentie: CSS3-animatie-iteratie-count Property
HTML DOM-referentie: Stijlanimatie Eigenschap