Kurs HTML

Do czego służy animation-iteration-count?

Właściwość animation-iteration-count określa, **ile razy cykl animacji** (zdefiniowany przez @keyframes i trwający animation-duration) **ma zostać odtworzony**.

Domyślnie animacja odtwarza się tylko raz. Ta właściwość pozwala na tworzenie zapętlonych lub wielokrotnie powtarzanych efektów.

Składnia i wartości

Właściwość animation-iteration-count przyjmuje jedną lub więcej wartości, oddzielonych przecinkami, odpowiadających kolejnym animacjom zdefiniowanym w animation-name.

animation-iteration-count: infinite | <liczba> [, infinite | <liczba>]*;Kopiuj

• infinite: Animacja będzie powtarzana w nieskończoność.
• <liczba>: Nieujemna liczba (może być ułamkowa) określająca, ile razy animacja ma się odtworzyć.
  • 1 (wartość domyślna): Animacja odtworzy się raz.
  • 2: Animacja odtworzy się dwa razy.
  • 0.5: Animacja odtworzy się do połowy swojego cyklu.

Wartość domyślna: 1.

Przykład:

@keyframes migotanie {
  50% { opacity: 0; }
}

@keyframes obrot {
  to { transform: rotate(360deg); }
}

.element1 {
  animation-name: migotanie;
  animation-duration: 1s;
  /* Powtórz animację 3 razy */
  animation-iteration-count: 3;
}

.element2 {
  animation-name: obrot;
  animation-duration: 2s;
  /* Powtarzaj animację w nieskończoność */
  animation-iteration-count: infinite;
}

.element3 {
  animation-name: animacjaX, animacjaY;
  animation-duration: 1s, 4s;
  /* Animacja X powtórzy się 5 razy, animacja Y w nieskończoność */
  animation-iteration-count: 5, infinite;
}

.element4 {
  animation-name: migotanie;
  animation-duration: 1s;
  /* Odtwórz tylko pierwszą połowę animacji */
  animation-iteration-count: 0.5;
}
Kopiuj

Jeśli lista liczb powtórzeń jest krótsza niż lista nazw animacji, wartości są powtarzane.

Zastosowania animation-iteration-count

• Zapętlone animacje tła lub ikon: Ustawienie infinite jest idealne dla subtelnych, ciągłych animacji, takich jak pulsowanie, obracanie się ikon ładowania, czy delikatne przesuwanie tła.
• Krótkie, powtarzalne efekty: Ustawienie konkretnej liczby powtórzeń (np. 2 lub 3) może być użyte do zwrócenia uwagi na element poprzez krótki, powtarzający się efekt (np. lekkie potrząśnięcie).
• Kontrolowane sekwencje: W połączeniu z animation-delay i potencjalnie JavaScriptem, można tworzyć złożone sekwencje, gdzie pewne animacje odtwarzają się określoną liczbę razy przed przejściem do następnego etapu.
• Debugowanie: Czasami ustawienie infinite podczas tworzenia animacji ułatwia obserwację jej przebiegu bez konieczności ciągłego odświeżania.