Properti elapsedTime AnimationEvent

Definisi dan penggunaan

Properti elapsedTime mengembalikan detik animasi yang telah berjalan saat terjadi peristiwa animasi.

Keterangan:Nilai kembalian tidak terpengaruh jika animasi dihentikan (dengan menggunakan properti CSS animation-delay).

Keterangan:Untuk Event animationstart, properti ini selalu kembalikan "0".

Keterangan:Properti ini hanya membaca.

Contoh

Tentukan berapa lama animasi berjalan dalam detik:

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
  this.innerHTML = "Waktu berlalu: " + event.elapsedTime;
}

Coba sendiri

Sintaks

event.elapsedTime

Detil teknis

Nilai kembalian: Nilai angka, menunjukkan detik animasi berjalan.

Dukungan browser

Angka di tabel menandai versi browser pertama yang mendukung properti ini penuh.

Properti Chrome IE Firefox Safari Opera
elapsedTime Dukungan 10.0 6.0 Dukungan Dukungan

Halaman relevan

Panduan Referensi DOM HTML:Event animationstart

Panduan Referensi DOM HTML:Event animationiteration

Panduan Referensi DOM HTML:Event animationend

Panduan Referensi DOM HTML:Properti animationName AnimationEvent

Panduan Referensi CSS:Properti animation CSS3

Panduan Referensi CSS:Properti animation-duration CSS3