animationiteration-händelse

DOM händelser AnimationEvent

Definition och användning

animationiteration-händelsen inträffar när CSS-animationen upprepas.

Om CSS animation-iteration-count egenskapSätt till "1" innebär att animationen bara spelar upp en gång, och animationiteration-händelsen inträffar inte. Animationen måste köras flera gånger för att denna händelse ska utlösas.

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

När CSS animation spelas upp, kan tre händelser inträffa:

Exempel

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

var x = document.getElementById("myDIV");
// Kód för Chrome, Safari och Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);

Prova själv

Syntax

object.addEventListener("webkitAnimationIteration", myScript);  // Kód för Chrome, Safari och Opera
object.addEventListener("animationiteration", myScript);        // Standard syntax

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

Tekniska detaljer

Bubbling: Stödjer
Kan avbrytas: Ej stödjer
Händelse typ: AnimationEvent
DOM version: Nivå 3 händelser

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarversionen som fullständigt stöder händelsen.

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

händelse Chrome IE Firefox Safari Opera
animationiteration 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 tutorial:CSS3 animation

CSS referenshandbok:CSS3 animation egenskap

CSS referenshandbok:CSS3 animation-iteration-count egenskap

HTML DOM referenshandbok:Style animation-egenskap

DOM händelser AnimationEvent