Event animationiteration
Definisi dan penggunaan
Event animationiteration terjadi saat animasi CSS diulang-ulang.
Jika Properti animation-iteration-count CSSDitetapkan menjadi "1", berarti animasi hanya akan dimainkan sekali, dan event animationiteration tidak akan terjadi. Animasi harus dijalankan beberapa kali untuk memicu event ini.
Untuk pengetahuan lebih lanjut tentang animasi CSS, silakan belajar di Tutorial Animate CSS3.
Tiga acara dapat terjadi saat animasi CSS dimainkan:
- animationstart - Terjadi saat animasi CSS dimulai
- animationiteration - Terjadi saat animasi CSS berulang
- animationend - Terjadi saat animasi CSS selesai
Contoh
Lakukan sesuatu untuk elemen <div> saat animasi CSS berulang:
var x = document.getElementById("myDIV");
// Kode untuk Chrome, Safari, dan Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Syntax Standar
x.addEventListener("animationiteration", myRepeatFunction);
Syntax
objek.addEventListener("webkitAnimationIteration", myScript); // Kode untuk Chrome, Safari, dan Opera
objek.addEventListener("animationiteration", myScript); // Syntax Standar
Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung Metode addEventListener().
Detil Teknis
| Bubbling: | Didukung |
|---|---|
| Dapat dibatalkan: | Tidak didukung |
| Tipe Acara: | AnimationEvent |
| Versi DOM: | Acara Level 3 |
Dukungan Peramban
Angka di tabel menunjukkan versi pertama peramban yang mendukung acara sepenuhnya.
Angka setelah "webkit" atau "moz" menunjukkan versi pertama yang menggunakan awalan.
| Acara | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Keterangan:Untuk Chrome, Safari, dan Opera, gunakan webkitAnimationEnd.
Halaman yang berhubungan
Pelajaran CSS:Animasikan CSS3
Panduan CSS:Properti animation CSS3
Panduan CSS:Properti animation-iteration-count CSS3
Panduan HTML DOM:Properti animation Style
