Właściwość CSSAnimacje
animation-iteration-count
Ustala, ile razy animacja ma się powtórzyć.
- Wartość domyślna
1- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationIterationCount = "infinite"
Przykład
#CSS
.new-message {
animation: ring 0.4s ease-in-out 3;
}HTML przykładu
<style>@keyframes ring2 { 25% { rotate: 15deg; } 75% { rotate: -15deg; } }</style>
<p style="margin: 0;"><span style="display: inline-block; animation: ring2 .4s ease-in-out 3;">🔔</span> Masz nową wiadomość od mentora</p>Podgląd
Definicja i zastosowanie
#Właściwość animation-iteration-count określa liczbę przebiegów animacji. Domyślnie animacja odtwarza się raz. Możesz podać dowolną liczbę albo infinite, żeby zapętlić ją na zawsze.
Dozwolone są też ułamki: 0.5 odtworzy połowę animacji i zatrzyma się w jej środku.
Razem z animation-direction: alternate każdy kolejny przebieg idzie w przeciwną stronę, więc dwa przebiegi dają ruch tam i z powrotem.
Składnia
#Składnia
animation-iteration-count: infinite | <liczba> [, …]*;Wartości
#Wartości w praktyce
#1
Jedno potrząśnięcie dzwonkiem.
.demo { animation-iteration-count: 1; }3
Trzy potrząśnięcia z rzędu.
.demo { animation-iteration-count: 3; }infinite
Dzwonek dzwoni bez przerwy.
.demo { animation-iteration-count: infinite; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Powiadomienia i wyróżnienia animuj kilka razy, nie w nieskończoność. Ciągły ruch szybko zaczyna przeszkadzać.
infiniterezerwuj dla stanów, które faktycznie trwają, jak ładowanie.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.