animasiend Acara
Contoh
Lakukan sesuatu dengan elemen <div> saat animasi CSS telah berakhir:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definisi dan Penggunaan
Acara animationend terjadi ketika animasi CSS telah selesai.
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 | |||||
---|---|---|---|---|---|
animationend | 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 webkitAnimationEnd.
Sintaksis
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", 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 DOM HTML: Properti animasi gaya