animationiteration Event

Przykład

Zrób coś z <div> elementu, gdy animacja CSS powtarza:

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

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);

Spróbuj sam "

Definicja i Wykorzystanie

Impreza animationiteration występuje, gdy animacja CSS jest powtarzany.

Jeśli CSS animationiteration-count właściwość jest ustawiona na "1" , co oznacza, że animacja zostanie odtworzona tylko jeden raz, zdarzenie animationiteration nie występuje. Animacja musi uruchomić więcej niż jeden raz za to zdarzenie na ogień.

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
animationiteration	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 webkitAnimationIteration.

Składnia

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

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