animacjaiteracja Wydarzenie
Przykład
Zrób coś z elementem <div>, gdy animacja CSS się powtarza:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definicja i użycie
Zdarzenie Animationiteration występuje, gdy animacja CSS jest powtarzana.
Jeśli właściwość CSS animation-iteration-count ma wartość „1”, co oznacza, że animacja zostanie odtworzona tylko raz, zdarzenie animationiteration nie występuje. Aby to zdarzenie zostało uruchomione, animacja musi zostać uruchomiona więcej niż jeden raz.
Aby uzyskać więcej informacji na temat animacji CSS, zapoznaj się z naszym samouczkiem dotyczącym animacji CSS3 .
Podczas odtwarzania animacji CSS mogą wystąpić trzy zdarzenia:
- Animationstart - występuje, gdy animacja CSS została uruchomiona
- Animationiteration - występuje, gdy animacja CSS jest powtarzana
- Animationend - występuje, gdy animacja CSS została zakończona
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
Liczby, po których następuje „webkit” lub „moz”, określają pierwszą wersję, która działała z prefiksem.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Uwaga: w przeglądarkach 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: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
Bąbelki: | tak |
---|---|
Możliwość anulowania: | Nie |
Typ wydarzenia: | AnimacjaWydarzenie |
Wersja DOM: | Wydarzenia poziomu 3 |
Powiązane strony
Samouczek CSS: animacje CSS3
Dokumentacja CSS: Właściwość animacji CSS3
CSS Reference: CSS3 animation-iteration-count Property
Odniesienie HTML DOM: Właściwość animacji stylu