animasyon yineleme Olay
Örnek
Bir CSS animasyonu tekrarlandığında <div> öğesiyle bir şeyler yapın:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Tanım ve Kullanım
Animasyon yineleme olayı, bir CSS animasyonu tekrarlandığında meydana gelir.
CSS animasyon-yineleme-sayısı özelliği "1" olarak ayarlanırsa, yani animasyon yalnızca bir kez oynatılırsa, animasyon yineleme olayı gerçekleşmez. Bu etkinliğin tetiklenmesi için animasyonun birden fazla kez çalıştırılması gerekir.
CSS Animasyonları hakkında daha fazla bilgi için CSS3 Animasyonları hakkındaki eğiticimize bakın .
Bir CSS animasyonu oynatıldığında meydana gelebilecek üç olay vardır:
- animasyon başlangıcı - CSS animasyonu başladığında gerçekleşir
- animasyon yineleme - CSS animasyonu tekrarlandığında oluşur
- animasyonend - CSS animasyonu tamamlandığında oluşur
Tarayıcı Desteği
Tablodaki sayılar, olayı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
"Webkit" veya "moz" tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Not: Chrome, Safari ve Opera için webkitAnimationIteration önekini kullanın.
Sözdizimi
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
kabarcıklar: | Evet |
---|---|
İptal edilebilir: | Numara |
Etkinlik tipi: | AnimasyonEtkinlik |
DOM Sürümü: | 3. Seviye Etkinlikleri |
İlgili Sayfalar
CSS Eğitimi: CSS3 Animasyonları
CSS Referansı: CSS3 animasyon Özelliği
CSS Referansı: CSS3 animasyon-yineleme-sayısı Özellik
HTML DOM referansı: Stil animasyonu Özellik