Animation iteration

CSS kursu · İleri seviye · Ders 4/52

animation-iteration-count ile tekrar sayısını öğrenirsin.

animation-iteration-count nedir?

animation-iteration-count animasyonun kaç kere oynayacağını belirler. Varsayılan 1'dir; yani bir kez oynar ve durur. 3 yazarsan üç kez oynar.

Sürekli dönen bir yükleyici için infinite kullanılır: animasyon hiç durmaz. Bir kez oynayan bir bildirim için 1 yeterlidir. Sayı veya infinite yazılır; başka değer yoktur.

Süre ve tekrar çarpımı

Toplam süre, süre × tekrar sayısıdır. animation-duration: 2s ve animation-iteration-count: 3 ise animasyon 6 saniye sürer. infinite ise süre hesaplanamaz; animasyon sürekli oynar.

Bu yüzden döngüsel hareketler (dönme, nabız, soluk) için infinite uygundur. Bir kez yapılan hareketler (açılış, geçiş) için sayı verilir. Kullanıcıyı rahatsız etmeyecek döngüleri seç.

Uygulama Tekrar sayılarını ekle

.loader sürekli dönmeli: animation-iteration-count: infinite. .notice üç kez nabız atmalı: animation-iteration-count: 3. Her iki öğeye animation-iteration-count bildirimini ekle.

Örnek çözümü göster

/* dönen yükleyici */
.loader {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

/* nabız bildirimi */
.notice {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: 3;
}

Kendini test et

Sürekli dönen yükleyici için hangi değer?
```
.loader {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: ???;
}
```
- 1
- infinite
- 0
- repeat
Cevabı göster

infinite — Doğru. infinite animasyonu sonsuz kez oynatır.

Üç kez oynat

.notice {
  animation-name: pulse;
  animation-iteration-count: ____;
}

Cevabı göster

.notice {
  animation-name: pulse;
  animation-iteration-count: 3;
}

Tekrar sayısını davranışıyla eşleştir

1

Bir kez oynar
3

Üç kez oynar
infinite

Sonsuz kez oynar
0

Hiç oynamaz
animation-duration: 2s ve iteration-count: 3 ise toplam süre ne kadar?
```
.notice {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: 3;
}
```
- 2 saniye
- 3 saniye
- 6 saniye
- 5 saniye
Cevabı göster

6 saniye — Doğru. 2s × 3 = 6 saniye.

İleri seviye bölümündeki tüm dersler

Animation iteration