animationiteration-Ereignis

DOM Ereignisse AnimationEvent

Definition und Verwendung

Das animationiteration-Ereignis tritt auf, wenn die CSS-Animation wiederholt wird.

Wenn CSS animation-iteration-count-EigenschaftWird "1" gesetzt, bedeutet dies, dass die Animation nur einmal abgespielt wird und es keine animationiteration-Ereignisse gibt. Die Animation muss mehrmals ausgeführt werden, um dieses Ereignis auszulösen.

Für mehr Informationen über CSS-Animationen, lernen Sie unseren CSS3 Animation-Tutorial.

Wenn die CSS-Animation abgespielt wird, können drei Ereignisse ausgelöst werden:

Beispiel

Wenn die CSS-Animation wiederholt wird, tun Sie etwas mit dem <div>-Element:

var x = document.getElementById("myDIV");
// Code für Chrome, Safari und Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard-Syntax
x.addEventListener("animationiteration", myRepeatFunction);

Probieren Sie es selbst aus

Syntax

objekt.addEventListener("webkitAnimationIteration", myScript);  // Code für Chrome, Safari und Opera
objekt.addEventListener("animationiteration", myScript);        // Standard-Syntax

Anmerkung:Internet Explorer 8 oder frühere Versionen unterstützen dies nicht addEventListener() Methode.

Technische Details

Blasen: Unterstützt
Abbrechbar: Nicht unterstützt
Ereignis-Typ: AnimationEvent
DOM-Version: Level 3 Ereignisse

Browser-Unterstützung

Die Zahl in der Tabelle zeigt die erste Browser-Version an, die das Ereignis vollständig unterstützt.

Die Zahl nach dem "webkit" oder "moz" zeigt die erste Version an, die den Präfix verwendet.

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

Anmerkung:Für Chrome, Safari und Opera verwenden Sie webkitAnimationEnd.

Verwandte Seiten

CSS教程：CSS3 Animation

CSS Referenzhandbuch:CSS3 animation Eigenschaft

CSS Referenzhandbuch:CSS3 animation-iteration-count Eigenschaft

HTML DOM Referenzhandbuch:Style animation-Eigenschaft

DOM Ereignisse AnimationEvent