animationiteration Event

DOM Event AnimationEvent

Definitie en gebruik

het animationiteration-evenement treedt op tijdens het herhalen van CSS-animaties.

Als CSS animation-iteration-count PropertyIndien ingesteld op "1", betekent dit dat de animatie slechts één keer wordt afgespeeld en het animationiteration-evenement zal niet optreden. De animatie moet meerdere keren worden uitgevoerd om dit evenement te activeren.

Voor meer kennis over CSS animaties, raadpleeg onze CSS3 Animatie Handleiding.

Tijdens het afspelen van een CSS animatie kunnen er drie gebeurtenissen optreden:

Voorbeeld

Wanneer een CSS animatie herhaalt, voer iets uit op het <div>-element:

var x = document.getElementById("myDIV");
// Code voor Chrome, Safari en Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standaard syntaxis
x.addEventListener("animationiteration", myRepeatFunction);

Probeer het zelf uit

Syntaxis

object.addEventListener("webkitAnimationIteration", myScript);  // Code voor Chrome, Safari en Opera
object.addEventListener("animationiteration", myScript);        // Standaard syntaxis

Opmerking:Internet Explorer 8 of eerder ondersteunt dit niet addEventListener() Methode.

Technische Details

Bubbelen: Ondersteund
Annuleerbaar: Niet ondersteund
Evenement Type: AnimationEvent
DOM Versie: Niveau 3 Events

Browserondersteuning

De cijfers in de tabel verklaren de eerste browserversie die het evenement volledig ondersteunt.

De cijfers achter de "webkit" of "moz" verklaren de eerste versie met de voorvoegsel die wordt gebruikt.

Event Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Opmerking:Voor Chrome, Safari en Opera, gebruik webkitAnimationEnd.

Gerelateerde Pagina's

CSS Handleiding:CSS3 Animatie

CSS ReferentiesCSS3 animation eigenschap

CSS ReferentiesCSS3 animation-iteration-count eigenschap

HTML DOM ReferentiesStyle animation Property

DOM Event AnimationEvent