Event animationend

Event DOM AnimationEvent

Definisi dan penggunaan

Peristiwa animationend terjadi saat animasi CSS selesai.

Untuk mendapatkan pengetahuan lebih lanjut tentang animasi CSS, belajar di kursus kami Tutorial Animaasi CSS3.

Terdapat tiga peristiwa yang mungkin terjadi saat animasi CSS berjalan:

Contoh

Lakukan sesuatu terhadap elemen <div> saat animasi CSS selesai:

var x = document.getElementById("myDIV");
// Kode untuk Chrome, Safari, dan Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Syntax standar
x.addEventListener("animationend", myEndFunction);

Coba sendiri

Syntax

object.addEventListener("webkitAnimationEnd", myScript);  // Kode untuk Chrome, Safari, dan Opera
object.addEventListener("animationend", myScript);        // Syntax standar

Komentar:Internet Explorer 8 dan versi sebelumnya tidak mendukung Metode addEventListener().

Detil Teknologi

Bubbling: Didukung
Dapat dibatalkan: Tidak didukung
Tipe Event: AnimationEvent
Versi DOM: Level 3 Events

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung peristiwa ini sepenuhnya.

Angka di belakang "webkit" atau "moz" menunjukkan versi awal yang digunakan sebelum penamaan awalan.

Event Chrome IE Firefox Safari Opera
animationend 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Komentar:Untuk Chrome, Safari, dan Opera, gunakan webkitAnimationEnd.

Halaman yang berhubungan

CSS Tutorial:Animasi CSS3

Panduan Referensi CSS:Properti animation CSS3

Panduan Referensi DOM HTML:Properti animation Style

Event DOM AnimationEvent