animationend olayı

DOM Olayları AnimationEvent

Tanım ve Kullanım

CSS Animasyonu tamamladığında animationend olayı meydana gelir.

CSS Animasyonları hakkında daha fazla bilgi için, bizim CSS3 Animasyon Eğitimi.

CSS Animasyonu oynatılırken, üç olay meydana gelebilir:

Örnek

CSS Animasyonu bittiğinde, <div> elementine bir şey yapın:

var x = document.getElementById("myDIV");
// Chrome, Safari ve Opera için Kod
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standart Sözdizimi
x.addEventListener("animationend", myEndFunction);

Deneyin

Sözdizimi

nesne.addEventListener("webkitAnimationEnd", myScript);  // Chrome, Safari ve Opera için Kod
nesne.addEventListener("animationend", myScript);        // Standart Sözdizimi

Açıklama:Internet Explorer 8 veya daha eski sürümler desteklenmiyor addEventListener() Metodu.

Teknik Ayrıntılar

Yayılır: Destekleniyor
İptal Edilebilir: Desteklenmiyor
Olay Türü: AnimationEvent
DOM Sürümü: 3. Düzey Olaylar

Tarayıcı Desteği

Tablodaki sayılar, olayın tamamen desteklenen ilk tarayıcı sürümünü belirtir.

Sayıların arkasındaki "webkit" veya "moz" ön ekleri, kullanım öncesi ilk sürümü belirtir.

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

Açıklama:Chrome, Safari ve Opera için webkitAnimationEnd kullanın.

İlgili Sayfalar

CSS Eğitimi:CSS3 Animasyon

CSS Referans Kılavuzu:CSS3 animation özelliği

HTML DOM Referans Kılavuzu:Style animation özelliği

DOM Olayları AnimationEvent