animationend Event

Przykład

Zrób coś z <div> elementu, gdy animacja CSS zakończył:

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

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);

// Standard syntax
x.addEventListener("animationend", myEndFunction);

Spróbuj sam "

Definicja i Wykorzystanie

Impreza animationend występuje, gdy animacja CSS została zakończona.

Aby uzyskać więcej informacji na temat animacji CSS, zobacz nasz tutorial CSS3 animacji .

Kiedy animacji CSS gra, istnieją trzy zdarzenia, które mogą wystąpić:

animationstart - występuje, gdy rozpoczęła animacji CSS
animationiteration - występuje, gdy animacja CSS jest powtarzany
animationend - występuje, gdy animacja CSS zakończyła

Wsparcie przeglądarka

Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.

Numery obserwowani przez "webkit" lub "moz" określ pierwszą wersję, która pracowała z prefiksem.

Zdarzenie
animationend	4,0 WebKit	10,0	16,0 5,0 moz	4,0 WebKit	15,0 WebKit 12,1

Uwaga: W przypadku Chrome, Safari i Opera, użyj prefiksu webkitAnimationEnd.

Składnia

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

Uwaga: addEventListener() metoda ta nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.