Kierunek animacji, fill-mode i iteracje
Nauczy się Pan/Pani kontrolować kierunek odtwarzania animacji, liczbę jej powtórzeń oraz stan końcowy za pomocą fill-mode.
Kierunek animacji, fill-mode i iteracje to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
animation-iteration-count
Określa, ile razy animacja ma się powtórzyć. Wartość infinite umożliwia ciągłe zapętlenie.
<div class="spinner"></div>
<div class="pulse"></div>
animation-direction
Określa kierunek odtwarzania w kolejnych cyklach:
normal— każda iteracja jest odtwarzana do przodureverse— odtwarzanie wsteczalternate— naprzemiennie do przodu i do tyłualternate-reverse— najpierw do tyłu, a następnie do przodu
<div class="bounce"></div>
animation-fill-mode
Określa, co dzieje się z elementem przed rozpoczęciem animacji i po jej zakończeniu:
none— wartość domyślna, powrót do pierwotnego stanuforwards— zachowanie ostatniej klatki kluczowej po zakończeniubackwards— zastosowanie pierwszej klatki kluczowej w czasie opóźnieniaboth— zastosowanie obu trybów: backwards i forwards
Tryb wypełnienia forwards
Najczęstszy przypadek użycia — zachowanie elementu w końcowym stanie animacji po jej zakończeniu:
<p class="item">I fade in and stay visible</p>
Tryb wypełnienia backwards
Gdy występuje opóźnienie, backwards sprawia, że w okresie opóźnienia element przyjmuje stan z pierwszej klatki kluczowej, zapobiegając mignięciu pierwotnego stanu przed rozpoczęciem animacji:
<p class="item">Starts invisible during the delay</p>
Tryb wypełnienia both
both łączy tryby forwards i backwards — jest najbardziej przewidywalną opcją dla animowanych elementów, które nie powinny mignąć przed animacją ani po jej zakończeniu.
animation-delay
Opóźnia rozpoczęcie animacji. Ujemne opóźnienia powodują rozpoczęcie animacji w jej trakcie — jest to przydatne do synchronizowania wielu animacji:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
Wzorzec animacji kaskadowej
Kaskadowe uruchamianie animacji wyłącznie za pomocą CSS i opóźnień nth-child:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
Wstrzymywanie i wznawianie
Stan animacji można przełączać za pomocą JavaScriptu, zmieniając animation-play-state:
<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>
Resetowanie animacji
Aby ponownie odtworzyć animację CSS, należy usunąć klasę i dodać ją ponownie. Przeglądarka stosuje w tym celu pewien trik: między usunięciem a ponownym dodaniem wymusza ponowne obliczenie layoutu.
<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>
Ujemne animation-delay
Animację można rozpocząć w trakcie odtwarzania, używając ujemnego opóźnienia — jest to przydatne w przypadku zsynchronizowanych wzorów tła lub zapętlonych elementów, które powinny wyglądać tak, jakby już były w ruchu.
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
Szybkie sprawdzenie
Która wartość animation-fill-mode utrzymuje element w stanie z końcowej klatki kluczowej po zakończeniu animacji?
Podsumowanie
animation-iteration-count: infinite zapętla animację na zawsze. animation-direction: alternate powoduje ruch wahadłowy. animation-fill-mode: forwards zachowuje stan końcowy. animation-fill-mode: both jest najbezpieczniejszą opcją. Ujemne opóźnienia służą do przesuwania w czasie zsynchronizowanych animacji.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Kierunek animacji, fill-mode i iteracje” jest bezpłatna?
Tak — pełny tekst „Kierunek animacji, fill-mode i iteracje” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Kierunek animacji, fill-mode i iteracje”?
Nauczy się Pan/Pani kontrolować kierunek odtwarzania animacji, liczbę jej powtórzeń oraz stan końcowy za pomocą fill-mode. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Kierunek animacji, fill-mode i iteracje”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Składnia @keyframes i właściwość animation
- Kierunek animacji, fill-mode i iteracje
- Łączenie i sekwencjonowanie animacji
- Dostępne animacje z prefers-reduced-motion