Beispiel
Tun Sie etwas mit einem <div> Elemente , wenn eine CSS - Animation beendet ist:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); Versuch es selber " Definition und Verwendung
Das animationend Ereignis tritt auf, wenn eine CSS-Animation abgeschlossen 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 | |||||
|---|---|---|---|---|---|
| animationend | 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 webkitAnimationEnd Präfix.
Syntax
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", 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