animationend event

DOM events AnimationEvent

definitie en gebruik

De gebeurtenis animationend wordt aangeroepen wanneer de CSS-animatie voltooid is.

Voor meer informatie over CSS-animaties, leer onze CSS3 Animatie Handleiding.

Er kunnen drie gebeurtenissen optreden wanneer de CSS-animatie speelt:

voorbeeld

Doe iets met het <div>-element wanneer de CSS-animatie eindigt:

var x = document.getElementById("myDIV");
// specifieke code voor Chrome, Safari en Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// standaard syntaxis
x.addEventListener("animationend", myEndFunction);

Probeer het zelf uit

syntaxis

object.addEventListener("webkitAnimationEnd", myScript);  // specifieke code voor Chrome, Safari en Opera
object.addEventListener("animationend", myScript);        // standaard syntaxis

Opmerking:Internet Explorer 8 of eerder ondersteunt deze niet addEventListener() methode.

technische details

bubbelen: ondersteund
annuleerbaar: niet ondersteund
gebeurtenistype: AnimationEvent
DOM versie: Niveau 3 Gebeurtenissen

browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die het gebeurtenis volledig ondersteunt.

De cijfers achter 'webkit' of 'moz' vermelden de eerste versie van het voorvoegsel dat wordt gebruikt.

gebeurtenissen Chrome IE Firefox Safari Opera
animationend 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 animation

CSS reference manual:CSS3 animation property

HTML DOM reference manual:Style animation property

DOM events AnimationEvent