animationend-Ereignis

DOM-Ereignisse AnimationEvent

Definition und Verwendung

Das Ereignis animationend wird ausgelöst, wenn die CSS-Animation abgeschlossen ist.

Für mehr Informationen über CSS-Animationen lernen Sie unsere CSS3-Animation-Anleitung.

Drei Ereignisse können ausgelöst werden, wenn die CSS-Animation abgespielt wird:

Beispiel

Erledigen Sie etwas mit dem <div>-Element, wenn die CSS-Animation endet:

var x = document.getElementById("myDIV");
// Code für Chrome, Safari und Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard Syntax
x.addEventListener("animationend", myEndFunction);

Versuchen Sie es selbst

Syntax

object.addEventListener("webkitAnimationEnd", myScript);  // Code für Chrome, Safari und Opera
object.addEventListener("animationend", myScript);        // Standard Syntax

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

Technische Details

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

Browser-Unterstützung

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

Die "webkit" oder "moz" am Ende der Zahl weist auf die erste Version des Präfixes vor der Verwendung hin.

Ereignis Chrome IE Firefox Safari Opera
animationend 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-Anleitung:CSS3-Animation

CSS Referenzhandbuch:CSS3-animation-Eigenschaft

HTML DOM Referenzhandbuch:Style-animation-Eigenschaft

DOM-Ereignisse AnimationEvent