Wbudowane animacje klatek kluczowych
Stosować wbudowane animacje Tailwind: animate-spin, animate-ping, animate-pulse i animate-bounce do typowych wzorców ładowania oraz przyciągania uwagi.
Wbudowane animacje klatek kluczowych to bezpłatna lekcja Tailwind 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 Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Animacje klatek kluczowych CSS a przejścia
Przejścia CSS animują zmianę między dwoma stanami określonymi przez wartość początkową i końcową. Animacje klatek kluczowych CSS definiują sekwencję wielu stanów i mogą być odtwarzane w nieskończonej pętli. Tailwind zawiera cztery wbudowane animacje klatek kluczowych dostępne za pośrednictwem narzędzi animate-*. Obejmują one najczęstsze wzorce animacji interfejsu: wskaźniki ładowania, pulsujące szkielety, przyciągające uwagę sygnały ping oraz podskakujące wskaźniki — wszystko bez niestandardowego CSS.
animate-spin
animate-spin obraca element bez przerwy ze stałą prędkością — wykonuje jeden pełny obrót o 360 stopni na sekundę. Jest to standardowe narzędzie do tworzenia wskaźników ładowania. Zastosuj je do okrągłego elementu lub ikony SVG, aby wskazać trwającą operację. Animacja jest odtwarzana w nieskończonej pętli, dopóki klasa nie zostanie usunięta. Najczęściej łączy się ją z ikoną pierścienia SVG zawierającą przerwę, aby uzyskać charakterystyczny wygląd wskaźnika.
<!-- Loading spinner using animate-spin -->
<svg class="animate-spin h-5 w-5 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<!-- Button with spinner -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg" disabled>
<svg class="animate-spin h-4 w-4" ...></svg>
Loading...
</button>animate-ping
animate-ping tworzy efekt fali lub skanowania radarem — element powiększa się i zanika w pętli. Jest często używany jako kropka powiadomienia lub wskaźnik aktywności nałożony na statyczny element. Element z efektem ping powinien być pozycjonowany absolutnie nad właściwym elementem za pomocą opakowania z klasą relative. Efekt przyciąga wzrok do powiadomienia, nie rozpraszając nadmiernie.
<!-- Notification badge with ping effect -->
<div class="relative inline-flex">
<button class="p-2 rounded-full bg-gray-100">
<!-- Bell icon -->
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Ping indicator -->
<span class="absolute top-0 right-0 -mt-0.5 -mr-0.5">
<span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</div>animate-pulse
animate-pulse delikatnie zmienia przezroczystość elementu tam i z powrotem — od pełnej przezroczystości do 50% i z powrotem, w pętli trwającej 2 sekundy. Jest to idealna animacja dla szkieletów ładowania, które pokazują kształt treści podczas jej pobierania. Zastosuj ją do szarych bloków zastępczych odwzorowujących układ ładowanej treści. Subtelne pulsowanie sygnalizuje ładowanie bez rozpraszania użytkownika.
<!-- Skeleton loader using animate-pulse -->
<div class="p-6 space-y-4">
<!-- Avatar + title skeleton -->
<div class="flex items-center gap-3">
<div class="animate-pulse bg-gray-200 rounded-full h-10 w-10"></div>
<div class="space-y-2 flex-1">
<div class="animate-pulse bg-gray-200 rounded h-4 w-1/3"></div>
<div class="animate-pulse bg-gray-200 rounded h-3 w-1/4"></div>
</div>
</div>
<!-- Content lines skeleton -->
<div class="space-y-2">
<div class="animate-pulse bg-gray-200 rounded h-4 w-full"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-5/6"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-4/5"></div>
</div>
</div>animate-bounce
animate-bounce porusza elementem w górę i w dół, tworząc ruch podskakujący. Wykorzystuje funkcję czasową cubic-bezier, która zapewnia naturalne zwalnianie w najwyższym punkcie każdego podskoku. Typowe zastosowania obejmują strzałkę w dół zachęcającą do przewinięcia, wskaźnik pisania w dymku czatu oraz ikonę powiadomienia zwracającą uwagę na nową treść. Domyślnie podskakiwanie jest ciągłe.
<!-- Scroll indicator using animate-bounce -->
<div class="flex flex-col items-center gap-2 mt-16">
<p class="text-sm text-gray-500">Scroll to explore</p>
<svg class="animate-bounce w-6 h-6 text-gray-400"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<!-- Typing indicator (three bouncing dots) -->
<div class="flex gap-1 p-3 bg-gray-100 rounded-2xl rounded-tl-none w-16">
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 0ms"></div>
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 150ms"></div>
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 300ms"></div>
</div>Zatrzymywanie animacji za pomocą animate-none
animate-none usuwa każdą aktywną animację z elementu. Jest to przydatne w połączeniu z wariantami responsywnymi lub stanów, aby wyłączać animację przy określonych rozmiarach ekranu lub w określonych warunkach. Można na przykład użyć motion-reduce:animate-none, aby wyłączyć wszystkie animacje użytkownikom preferującym ograniczony ruch, albo zatrzymać wskaźnik ładowania po załadowaniu danych, przełączając klasę za pomocą JavaScript.
<!-- Stop animation for reduced-motion users -->
<svg class="animate-spin motion-reduce:animate-none h-5 w-5 text-blue-600">
...
</svg>
<!-- Stop animation at large screens -->
<div class="animate-pulse lg:animate-none bg-gray-200 rounded h-4 w-48">
<!-- Only pulses on mobile/tablet, static on desktop -->
</div>
<!-- JavaScript: remove animation when done -->
<!-- spinner.classList.remove('animate-spin'); -->Łączenie animate z renderowaniem warunkowym
W frameworkach opartych na komponentach zwykle wyświetla się stan wirowania lub pulsowania warunkowo, na podstawie stanu ładowania. Klasa animacji jest częścią komponentu szkieletu lub ładowania, który jest renderowany podczas pobierania danych, a po jego zakończeniu zastępowany właściwą treścią. Takie podejście utrzymuje logikę animacji w interfejsie stanu ładowania, zamiast programowo dodawać i usuwać klasy.
// React: conditional rendering for loading state
function UserCard({ user, isLoading }) {
if (isLoading) {
return (
<div class="p-6 space-y-3">
<div class="animate-pulse bg-gray-200 rounded-full h-12 w-12"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-32"></div>
<div class="animate-pulse bg-gray-200 rounded h-3 w-24"></div>
</div>
);
}
return (
<div class="p-6">
<img src={user.avatar} class="h-12 w-12 rounded-full" />
<p class="font-semibold mt-3">{user.name}</p>
<p class="text-gray-500 text-sm">{user.role}</p>
</div>
);
}Liczba powtórzeń animacji i tryb wypełnienia
Wbudowane animacje Tailwind są domyślnie odtwarzane w nieskończonej pętli. Jeśli animacja ma zostać odtworzona określoną liczbę razy (raz w przypadku animacji wejścia, dwa razy w przypadku mignięcia zwracającego uwagę), należy użyć własnych właściwości CSS lub niestandardowej klasy animacji. Rozszerz theme.extend.keyframes i theme.extend.animation w konfiguracji, aby dodać animacje z kontrolowaną liczbą powtórzeń i trybami wypełnienia.
// tailwind.config.js — add a one-shot animation
module.exports = {
theme: {
extend: {
keyframes: {
'shake': {
'0%, 100%': { transform: 'translateX(0)' },
'20%, 60%': { transform: 'translateX(-6px)' },
'40%, 80%': { transform: 'translateX(6px)' },
},
},
animation: {
'shake': 'shake 0.5s ease-in-out 1', // runs once
},
},
},
};
<!-- Usage -->
<input class="animate-shake border-red-500" type="text" placeholder="Shake on error" />Tworzenie sekwencji wbudowanych animacji
Rozłożenie opóźnień animacji między elementami równorzędnymi tworzy angażujący efekt kaskadowy. Tailwind nie ma wbudowanego narzędzia do tworzenia sekwencji, ale można użyć atrybutów style w kodzie HTML, aby ustawić poszczególne wartości animation-delay. W przypadku listy elementów zwiększaj opóźnienie każdego kolejnego elementu o 50–100 ms. Całkowity czas sekwencji powinien być krótszy niż 300 ms, aby użytkownicy nie czekali na pojawienie się ostatniego elementu.
<!-- Staggered skeleton loaders -->
<ul class="space-y-3">
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 0ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 75ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 150ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 225ms"></li>
</ul>
<!-- Staggered bounce dots -->
<div class="flex gap-1">
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 0ms"></div>
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 150ms"></div>
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 300ms"></div>
</div>Responsywne stosowanie animacji
Podobnie jak wszystkie narzędzia Tailwind, klasy animate działają z prefiksami responsywnymi. Można wyłączyć animację na dużych ekranach, gdzie stan ładowania może być mniej potrzebny, albo zastosować różne animacje w różnych punktach przerwania. Użyj prefiksów sm:, md: i lg: wraz z animate-none, aby stopniowo wyłączać animacje wraz ze zwiększaniem się obszaru widoku i zachować płynność działania na komputerach.
<!-- Animate on mobile, static on desktop -->
<div class="animate-pulse md:animate-none bg-gray-200 rounded h-12 w-full">
Pulses on mobile, static on md+ screens
</div>
<!-- Spinner only visible on small screens -->
<svg class="animate-spin sm:hidden h-5 w-5 text-blue-600" ...></svg>
<!-- Use different animations at different breakpoints -->
<div class="animate-bounce md:animate-ping lg:animate-spin h-4 w-4 rounded-full bg-green-500">
Different animation per breakpoint
</div>Rzeczywisty wzorzec ładowania
Wysokiej jakości ładowanie w produkcyjnej aplikacji łączy wiele narzędzi animacji. Główny obszar treści wyświetla szkielet z klasą animate-pulse zastosowaną do bloków zastępczych. Wskaźnik stanu korzysta z animate-ping. Jeśli w przycisku lub nagłówku widoczny jest wskaźnik ładowania, do jego elementu SVG należy zastosować animate-spin. Wszystkie animacje powinny zatrzymać się po załadowaniu treści, która powinna zostać zastąpiona właściwą treścią bez nagłego, nieprzyjemnego przeskoku.
<!-- Full loading state with multiple animations -->
<div class="border border-gray-200 rounded-xl p-6">
<!-- Status indicator -->
<div class="flex items-center gap-2 mb-4">
<div class="relative">
<span class="animate-ping absolute h-3 w-3 rounded-full bg-blue-400 opacity-75"></span>
<span class="h-3 w-3 rounded-full bg-blue-600 block relative"></span>
</div>
<span class="text-sm text-gray-500">Fetching data...</span>
<svg class="animate-spin h-4 w-4 text-blue-500 ml-auto" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
</svg>
</div>
<!-- Skeleton content -->
<div class="space-y-3">
<div class="animate-pulse h-4 bg-gray-200 rounded w-3/4"></div>
<div class="animate-pulse h-4 bg-gray-200 rounded w-1/2"></div>
<div class="animate-pulse h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat wbudowanych animacji klatek kluczowych Tailwind.
Podsumowanie lekcji
W tej lekcji nauczyli się Państwo, że: animate-spin tworzy wskaźniki ładowania, animate-ping tworzy fale powiadomień, animate-pulse tworzy szkielety ładowania, a animate-bounce tworzy pionowe podskakujące wskaźniki. Użyj motion-reduce:animate-none, aby wyłączyć animacje użytkownikom preferującym ograniczony ruch. W następnej części utworzymy niestandardowe animacje klatek kluczowych za pomocą konfiguracji Tailwind.
Ucz się HTML 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
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Wbudowane animacje klatek kluczowych” jest bezpłatna?
Tak — pełny tekst „Wbudowane animacje klatek kluczowych” 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 Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wbudowane animacje klatek kluczowych”?
Stosować wbudowane animacje Tailwind: animate-spin, animate-ping, animate-pulse i animate-bounce do typowych wzorców ładowania oraz przyciągania uwagi. Ćwiczysz Tailwind 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ąć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind 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 „Wbudowane animacje klatek kluczowych”?
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 Tailwind CSS Academy?
Tak. Każda lekcja Tailwind 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
- Narzędzia przejść
- Czas trwania i funkcja easing
- Wbudowane animacje klatek kluczowych
- Niestandardowe animacje w konfiguracji