Peristiwa animationstart

Peristiwa DOM AnimationEvent

Definisi dan penggunaan

Peristiwa animationstart terjadi saat animasi CSS dimulai untuk pertama kalinya.

Untuk mendapatkan pengetahuan lebih lanjut tentang animasi CSS, belajar dari Tutorial Animaasi CSS3.

Tiga peristiwa dapat terjadi saat animasi CSS berjalan:

Contoh

Lakukan sesuatu untuk elemen <div> saat animasi CSS dimulai:

var x = document.getElementById("myDIV");
// Kode untuk Chrome, Safari, dan Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Grama standar
x.addEventListener("animationstart", myStartFunction);

Coba sendiri

Grama

object.addEventListener("webkitAnimationStart", myScript);  // Kode untuk Chrome, Safari, dan Opera
object.addEventListener("animationstart", myScript);        // Grama standar

Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung Metode addEventListener().

Detil teknis

Pembubaran: Didukung
Dapat dibatalkan: Tidak didukung
Jenis peristiwa: AnimationEvent
Versi DOM: Level 3 Events

Dukungan Browser

Angka di tabel menunjukkan versi browser yang mendukung peristiwa sepenuhnya.

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

Peristiwa Chrome IE Firefox Safari Opera
animationstart 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

Tutorial CSS:Animasi CSS3

Referensi CSS:Properti animation CSS3

Referensi DOM HTML:Properti animation Style

Peristiwa DOM AnimationEvent