tutorial pengembangan web terbaru
 

animationiteration Acara

<Object Acara

Contoh

Lakukan sesuatu dengan <div> elemen ketika animasi CSS diulang:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Cobalah sendiri "

Definisi dan Penggunaan

Acara animationiteration terjadi ketika animasi CSS diulang.

Jika CSS animationiteration-count properti diatur ke "1" , yang berarti bahwa animasi hanya akan bermain satu kali, acara animationiteration tidak terjadi. animasi perlu dijalankan lebih dari sekali untuk acara ini untuk api.

Untuk informasi lebih lanjut tentang CSS Animasi, lihat tutorial kami pada CSS3 Animasi .

Ketika animasi CSS memainkan, ada tiga peristiwa yang dapat terjadi:

  • animationstart - terjadi ketika CSS animasi telah dimulai
  • animationiteration - terjadi ketika CSS animasi diulang
  • animationend - terjadi ketika animasi CSS telah menyelesaikan

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh acara tersebut.

Nomor diikuti oleh "webkit" atau "moz" tentukan versi pertama yang bekerja dengan awalan.

Peristiwa
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, menggunakan awalan webkitAnimationIteration.


Sintaksis

object.addEventListener("webkitAnimationIteration", myScript );  // Code for Chrome, Safari and Opera
object
.addEventListener("animationiteration", myScript );        // Standard syntax

Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.


Rincian teknis

Gelembung: iya nih
dibatalkan: Tidak
jenis acara: AnimationEvent
DOM Versi: Level 3 Acara

Pages terkait

CSS Tutorial: CSS3 Animasi

CSS Referensi: CSS3 animation Property

CSS Referensi: CSS3 animation-iteration-count Property

HTML DOM referensi: Style animation Property


<Object Acara