animationiteration olayı

DOM Olayları AnimationEvent

Tanım ve Kullanım

animationiteration olayı, CSS animasyonlarının tekrarlandığında meydana gelir.

Eğer CSS animation-iteration-count özelliği"1" olarak ayarlanmışsa, animasyon sadece bir kez oynar ve animationiteration olayı meydana gelmez. Bu olayı tetiklemek için animasyonun birden fazla kez çalışması gerekir.

CSS animasyonları hakkında daha fazla bilgi edinmek istiyorsanız, bizim kursumuzu öğrenin CSS3 Animasyon Eğitimi.

CSS animasyonu oynatılırken, üç olayın gerçekleşebilir olması mümkündür:

Örnek

CSS animasyonu tekrarlandığında, <div> elementine bazı şeyler yapın:

var x = document.getElementById("myDIV");
// Chrome, Safari ve Opera için kod
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standart Syntax
x.addEventListener("animationiteration", myRepeatFunction);

Kişisel Deneyim

Syntax

nesne.addEventListener("webkitAnimationIteration", myScript);  // Chrome, Safari ve Opera için kod
nesne.addEventListener("animationiteration", myScript);        // Standart Syntax

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

Teknik Ayrıntılar

Dalgalandırma: Destekleniyor
İptal Edilebilir: Desteklenmiyor
Olay Türü: AnimationEvent
DOM Sürümü: 3. Level Olayları

Tarayıcı Desteği

Tablo'daki rakamlar, olayın tamamen desteklendiği ilk tarayıcı sürümünü belirtir.

Sayıların arkasındaki "webkit" veya "moz", ön ek kullanımı için ilk sürümü belirtir.

Olay Chrome IE Firefox Safari Opera
animationiteration 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 Kaynak Kılavuzu:CSS3 animation Özelliği

CSS Kaynak Kılavuzu:CSS3 animation-iteration-count Özelliği

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

DOM Olayları AnimationEvent