Zdarzenie animationiteration
Definicja i użycie
Zdarzenie animationiteration występuje podczas powtarzającej się animacji CSS.
Jeśli Atrybut animation-iteration-count CSSUstawienie na "1" oznacza, że animacja będzie odtwarzana tylko raz, co oznacza, że nie będzie zdarzenia animationiteration. Animacja musi być odtwarzana wiele razy, aby wywołać to zdarzenie.
Jeśli chcesz dowiedzieć się więcej o animacjach CSS, naucz się z naszych CSS3 Animacja.
Podczas odtwarzania animacji CSS może wystąpić trzy zdarzenia:
- animationstart - Wydarzenie występuje, gdy animacja CSS się zaczyna
- animationiteration - Wydarzenie występuje, gdy animacja CSS się powtarza
- animationend - Wydarzenie występuje, gdy animacja CSS się kończy
Przykład
Kiedy CSS animacja się powtarza, zrób coś z elementem <div>:
var x = document.getElementById("myDIV");
// Kod dla Chrome, Safari oraz Opery
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standardowa składnia
x.addEventListener("animationiteration", myRepeatFunction);
Składnia
obiekt.addEventListener("webkitAnimationIteration", myScript); // Kod dla Chrome, Safari oraz Opery
obiekt.addEventListener("animationiteration", myScript); // Standardowa składnia
Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują Metoda addEventListener().
Szczegóły techniczne
| Bąbelkowanie: | Obsługiwane |
|---|---|
| Można anulować: | Nieobsługiwane |
| Typ zdarzenia: | Zdarzenie AnimationEvent |
| Wersja DOM: | Zdarzenia poziomu 3 |
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje to zdarzenie.
Liczby po przecinku "webkit" lub "moz" wskazują na pierwszą wersję używaną przedrostka.
| zdarzenia | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Komentarz:Dla Chrome, Safari oraz Opery użyj webkitAnimationEnd.
Strony związane
Kurs CSS:CSS3 animacja
Przeglądarka CSS:Atrybut CSS3 animation
Przeglądarka CSS:Atrybut CSS3 animation-iteration-count
Przeglądarka HTML DOM:Atrybut animation stylu
