Acara animasiiterasi
Contoh
Lakukan sesuatu dengan elemen <div> saat animasi CSS diulang:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definisi dan Penggunaan
Acara animationiteration terjadi ketika animasi CSS diulang.
Jika properti CSS animation-iteration-count disetel ke "1", artinya animasi hanya akan diputar satu kali, peristiwa animationiteration tidak terjadi. Animasi perlu dijalankan lebih dari sekali agar acara ini dapat diaktifkan.
Untuk informasi lebih lanjut tentang Animasi CSS, lihat tutorial kami tentang Animasi CSS3 .
Saat animasi CSS diputar, ada tiga peristiwa yang dapat terjadi:
- animationstart - terjadi ketika animasi CSS telah dimulai
- animationiteration - terjadi ketika animasi CSS diulang
- animationend - terjadi ketika animasi CSS telah selesai
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung acara tersebut.
Angka yang diikuti oleh "webkit" atau "moz" menentukan versi pertama yang berfungsi dengan awalan.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Catatan: Untuk Chrome, Safari, dan Opera, gunakan awalan webkitAnimationIteration.
Sintaksis
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Catatan: Metode addEventListener() tidak didukung di Internet Explorer 8 dan versi yang lebih lama.
Detail Teknis
Gelembung: | Ya |
---|---|
Dapat dibatalkan: | Tidak |
Jenis acara: | Acara Animasi |
Versi DOM: | Acara Tingkat 3 |
Halaman Terkait
Tutorial CSS: Animasi CSS3
Referensi CSS: Properti animasi CSS3
Referensi CSS: Properti animasi-iterasi-hitung CSS3
Referensi DOM HTML: Properti animasi gaya