animationstart -Ereignis
Beispiel
Machen Sie etwas mit einem <div>-Element, wenn eine CSS-Animation gestartet wurde:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener("animationstart", myStartFunction);
Definition und Verwendung
Das Ereignis animationstart tritt ein, wenn die Wiedergabe einer CSS-Animation begonnen hat.
Weitere Informationen zu CSS-Animationen finden Sie in unserem Tutorial zu CSS3-Animationen .
Beim Abspielen einer CSS-Animation können drei Ereignisse eintreten:
- animationstart - tritt auf, wenn die CSS-Animation gestartet wurde
- Animationiteration - tritt auf, wenn die CSS-Animation wiederholt wird
- animationend – tritt auf, wenn die CSS-Animation abgeschlossen ist
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Ereignis vollständig unterstützt.
Zahlen gefolgt von "webkit" oder "moz" geben die erste Version an, die mit einem Präfix funktioniert hat.
| Event | |||||
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Hinweis: Verwenden Sie für Chrome, Safari und Opera das Präfix webkitAnimationStart.
Syntax
object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript); // Standard syntax
Hinweis: Die Methode addEventListener() wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Technische Details
| Bläschen: | ja |
|---|---|
| kündbar: | Nein |
| Ereignistyp: | AnimationEvent |
| DOM-Version: | Ereignisse der Ebene 3 |
Verwandte Seiten
CSS-Tutorial: CSS3-Animationen
CSS-Referenz: CSS3-Animationseigenschaft
HTML-DOM-Referenz: Style-Animation-Eigenschaft