animationend-händelse

DOM-händelser AnimationEvent

Definition och användning

animationend-händelsen inträffar när CSS-animation är klar.

För mer information om CSS-animation, lär dig vår CSS3-animationlärjor.

Tre händelser kan inträffa när CSS-animation spelas upp:

Exempel

När CSS-animation är klar, gör något med <div>-elementet:

var x = document.getElementById("myDIV");
// Kod för Chrome, Safari och Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);

Prova själv

Syntax

object.addEventListener("webkitAnimationEnd", myScript);  // Kod för Chrome, Safari och Opera
object.addEventListener("animationend", myScript);        // Standard syntax

Kommentar:Internet Explorer 8 och äldre versioner stöder inte addEventListener() metod.

Tekniska detaljer

Bobbel: Stödd
Avbrytbar: Ej stödd
HändelseTyp: AnimationEvent
DOM-version: Nivå 3-händelser

Webbläsarstöd

Antalet i tabellen anger den första webbläsarversionen som helt stöder händelsen.

Antal efter "webkit" eller "moz" anger den första versionen som använde prefixet.

Händelse Chrome IE Firefox Safari Opera
animationend 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Kommentar:För Chrome, Safari och Opera, använd webkitAnimationEnd.

Relaterade sidor

CSS-lärjor:CSS3-animering

CSS referenshandbok:CSS3 animation-attribut

HTML DOM referenshandbok:Style animation-attribut

DOM-händelser AnimationEvent