Łączenie i sekwencjonowanie animacji
Nauczy się Pan/Pani tworzyć złożone sekwencje, łącząc wiele animacji z przesuniętymi w czasie opóźnieniami.
Łączenie i sekwencjonowanie animacji to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 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.
Po co tworzyć sekwencje animacji?
Złożone efekty interfejsu często wymagają wielu animacji wykonywanych po kolei: element wsuwa się, zatrzymuje, a następnie zanika. CSS udostępnia kilka narzędzi umożliwiających łączenie animacji bez użycia JavaScriptu.
Używanie animation-delay do tworzenia sekwencji
Najprostszy sposób tworzenia sekwencji polega na obliczeniu, kiedy powinna rozpocząć się kolejna animacja, na podstawie czasu trwania poprzedniej:
<div class="element">Slides in, then fades out</div>
Wielostopniowe klatki kluczowe
W przypadku pojedynczego elementu najczytelniejsze podejście polega na zapisaniu całej sekwencji w jednej regule @keyframes z procentowymi punktami animacji:
<div class="toast">Notification toast</div>
Własne właściwości CSS do określania czasu trwania
Czasy trwania można przechowywać w zmiennych CSS, aby łatwo koordynować łańcuchy animacji:
<div class="box">Custom-property-driven timing</div>
animation-timeline (nowoczesne podejście)
Web Animations API i animacje powiązane z przewijaniem (ScrollTimeline) umożliwiają zaawansowane tworzenie sekwencji bez obliczania opóźnień. To przyszłość złożonej orkiestracji animacji CSS.
Kaskadowanie za pomocą własnej właściwości CSS
Opóźnienia kaskadowe można wyznaczać na podstawie własnych właściwości CSS ustawianych bezpośrednio w kodzie lub za pomocą JavaScriptu:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
Sekwencjonowanie sterowane przez JavaScript
W przypadku precyzyjnych sekwencji obejmujących wiele elementów należy użyć Web Animations API albo biblioteki takiej jak GSAP. Sam CSS ma ograniczone możliwości koordynowania niezależnych elementów o złożonych zależnościach.
Animacje przyciągające uwagę
Sekwencja animacji przyciągającej uwagę: pulsowanie, a następnie uspokojenie:
<div class="notification">New message!</div>
Zdarzenie AnimationEnd
W JavaScriptu można nasłuchiwać zdarzenia animationend, aby programowo uruchomić kolejny etap:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Wzorzec przejścia między stronami
Sekwencja przejścia między stronami CSS z przełączaniem klas:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Szkielet stanu ładowania
Wielostopniowa animacja szkieletu ładowania z użyciem przesunięć:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Szybkie sprawdzenie
Jaki jest najlepszy sposób zapisania w CSS kompletnej, wieloetapowej sekwencji animacji dla pojedynczego elementu?
Podsumowanie
Sekwencjonowanie animacji CSS wykorzystuje opóźnienia dopasowane do wcześniejszych czasów trwania, wielostopniowe reguły @keyframes z procentowymi punktami animacji albo zmienne własnych właściwości przechowujące czasy trwania. Zdarzenie animationend umożliwia uruchamianie kolejnych faz z poziomu JavaScriptu. W przypadku złożonej orkiestracji obejmującej wiele elementów warto rozważyć Web Animations API.
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 „Łączenie i sekwencjonowanie animacji” jest bezpłatna?
Tak — pełny tekst „Łączenie i sekwencjonowanie animacji” 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 „Łączenie i sekwencjonowanie animacji”?
Nauczy się Pan/Pani tworzyć złożone sekwencje, łącząc wiele animacji z przesuniętymi w czasie opóźnieniami. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Łączenie i sekwencjonowanie animacji”?
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