Neueste Web-Entwicklung Tutorials
 

animationstart Ereignis

<Ereignisobjekt

Beispiel

Tun Sie etwas mit einem <div> Elemente , wenn eine CSS - Animation begonnen hat:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);

// Standard syntax
x.addEventListener("animationstart", myStartFunction);
Versuch es selber "

Definition und Verwendung

Das animationstart Ereignis tritt auf, wenn eine CSS-Animation zu spielen begonnen hat.

Weitere Informationen über CSS Animationen finden Sie in unserem Tutorial auf CSS3 Animationen .

Wenn ein CSS-Animation spielt, gibt es drei Ereignisse, die auftreten können:

  • animationstart - tritt auf, wenn die CSS-Animation gestartet
  • animationiteration - tritt auf, wenn die CSS - Animation wiederholt wird
  • animationend - tritt auf, wenn die CSS - Animation abgeschlossen

Browser-Unterstützung

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

Zahlen , gefolgt von "webkit" oder "moz" geben Sie die erste Version , die mit einem Präfix gearbeitet.

Event
animationstart 4.0 webkit 10.0 16.0
5,0 moz
4.0 webkit 15,0 webkit
12.1

Hinweis: Für Chrome, Safari und Opera, verwenden Sie den webkitAnimationStart Präfix.


Syntax

object.addEventListener("webkitAnimationStart", myScript );  // Code for Chrome, Safari and Opera
object
.addEventListener("animationstart", myScript );        // Standard syntax

Hinweis: Die addEventListener() Methode wird nicht unterstützt in Internet Explorer 8 und früheren Versionen.


Technische Details

Blasen: Ja
Es fällt eine Pauschale: Nein
Event-Typ: AnimationEvent
DOM Version: Level 3 Veranstaltungen

Verwandte Seiten

CSS Tutorial: CSS3 Animationen

CSS Referenz: CSS3 animation Property

HTML - DOM - Referenz: Style animation Property


<Ereignisobjekt