Animacje w Tailwind: wbudowane klasy i własne keyframes
Przewodnik po animacjach w Tailwind
Animacje w Tailwind: wbudowane klasy i własne keyframes | We.Inc
Zobacz animate-spin, ping, pulse i bounce w akcji z ich dokładnym CSS, a potem dodaj własne keyframes w Tailwind v4 przez @theme, korzystając z kreatora klatek kluczowych i wskazówek dotyczących ograniczonego ruchu.
Tailwind ma cztery gotowe animacje: animate-spin dla wskaźników ładowania, animate-ping dla kropek powiadomień, animate-pulse dla ekranów szkieletowych i animate-bounce dla zachęt do przewijania, a do tego animate-none, które je zatrzymuje. W v4 dodajesz własne, deklarując zmienną --animate-name i jej @keyframes wewnątrz @theme, co tworzy klasę animate-name.
Wbudowane klasy animacji w Tailwind v4
Klasa
Wartość
Typowe użycie
spin 1s linear infinite
Wskaźniki ładowania
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
Plakietki na żywo lub nieprzeczytanych
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
Szkieletowe placeholdery
bounce 1s infinite
Strzałki zachęcające do przewijania
animation: none
Wyłączanie animacji przy danym breakpoincie lub stanie
Każda wbudowana animacja poniżej działa na żywo, obok klatek kluczowych, które Tailwind dla niej generuje. Potem zbuduj własną: wybierz ruch, czas i liczbę powtórzeń, a następnie skopiuj gotowy blok @theme dla Tailwind v4 albo odpowiadającą mu konfigurację dla starszych projektów w v3.
Obejrzyj cztery wbudowane animacje i skopiuj potrzebną klasę.
Włącz podgląd ograniczonego ruchu, aby zobaczyć, co robią motion-safe i motion-reduce.
Użyj kreatora klatek kluczowych, aby wybrać ruch, czas trwania, krzywą przejścia i liczbę powtórzeń.
Wklej wygenerowany blok @theme do pliku CSS, który importuje Tailwind, a potem użyj nowej klasy.
Opakuj ozdobny ruch w motion-safe:, aby osoby, które poprosiły system o mniej ruchu, go nie dostawały.
Animuj transform i opacity. Animowanie width, height lub top wymusza przeliczanie układu w każdej klatce.
Użyj animate-[name_duration_easing] dla jednorazowej wartości; podkreślenia zastępują spacje w nawiasach.
Przy najechaniu i zmianach stanu klasa transition zwykle sprawdza się lepiej niż animacja z klatkami kluczowymi.
Animacje wejścia trzymaj krótkie, około 150 do 300 milisekund, aby strona nigdy nie wydawała się powolna.
Najczęściej zadawane pytania
Jak dodać własną animację w Tailwind v4?
Wewnątrz @theme w głównym pliku CSS zadeklaruj --animate-wiggle: wiggle 1s ease-in-out infinite; i umieść regułę @keyframes wiggle w tym samym bloku @theme. Tailwind wygeneruje wtedy klasę animate-wiggle, której możesz używać wszędzie.
Co się stało z keyframes z tailwind.config.js w v4?
v4 konfiguruje się w CSS, więc theme.extend.keyframes i theme.extend.animation stają się @keyframes i zmiennymi --animate-* wewnątrz @theme. Konfiguracja w JavaScript nadal działa, jeśli załadujesz ją dyrektywą @config, co pomaga w trakcie migracji.
Jak sprawić, by animacja odtworzyła się raz?
Usuń infinite z wartości i dodaj forwards, jeśli element ma zostać w ostatniej klatce, na przykład --animate-fade-in: fade-in 0.3s ease-out forwards. Jednorazowo możesz też napisać animate-[fade-in_0.3s_ease-out_forwards].
Czy Tailwind automatycznie respektuje ustawienia ograniczonego ruchu?
Nie. Warianty motion-safe: i motion-reduce: odpowiadają media query prefers-reduced-motion, ale musisz je zastosować sam. Popularny wzorzec to motion-safe:animate-bounce, który animuje tylko dla osób, które nie poprosiły o ograniczenie ruchu.
Do czego służy każda wbudowana animacja
Spin obraca element o pełny obrót co sekundę i pasuje do okrągłych wskaźników ładowania. Ping powiększa kopię kropki do dwukrotności jej rozmiaru, jednocześnie ją wygaszając, co wygląda jak impuls radaru; umieść go na absolutnie pozycjonowanym span za pełną kropką.
Pulse obniża przezroczystość do połowy i z powrotem w ciągu dwóch sekund, co jest standardowym wyglądem szarych bloków szkieletowych podczas ładowania treści. Bounce podbija element o ćwierć jego wysokości i opuszcza z powrotem, co sprawdza się przy pojedynczej strzałce zachęcającej do przewijania, a rzadko gdziekolwiek indziej.
Własne keyframes w v4
Tailwind v4 przeniósł konfigurację do CSS. Każda zmienna z przestrzeni nazw --animate-* wewnątrz @theme staje się klasą animate-*, a @keyframes zapisane w tym samym bloku są generowane razem z nią. Niczego więcej nie trzeba rejestrować.
Nazwa w zmiennej i nazwa w @keyframes muszą być identyczne. Niezgodność daje klasę ustawiającą animację, która wskazuje na nieistniejące klatki kluczowe, więc nic się nie rusza i nie pojawia się żaden błąd.
Ruch a dostępność
Duży, powtarzający się lub paralaksowy ruch może u niektórych osób wywoływać złe samopoczucie. Systemy operacyjne udostępniają ustawienie ograniczenia ruchu, a przeglądarki przekazują je do CSS jako prefers-reduced-motion.
Wskaźniki ładowania informujące o stanie mogą zachować łagodną wersję, natomiast ozdobne podskoki i elementy przyciągające uwagę powinny się zatrzymać. Testuj z włączonym ustawieniem albo z opcją emulacji w narzędziach deweloperskich przeglądarki.
CSS stojący za wbudowanymi klasami
Keyframes generowane przez Tailwind v4
Każda klasa animate-* ustawia animation na zmienną motywu; to są domyślne wartości i klatki kluczowe.
Własne animacje w v4 i v3
Tailwind v4: @theme w Twoim CSS
To tworzy animate-wiggle i animate-fade-up. Od razu używaj ich jako nazw klas.
Starsza konfiguracja w JavaScript, dla projektów, które jeszcze nie przeszły na v4.
Użycie w kodzie HTML
Dowolne wartości, odwołanie do zmiennej oraz motion-safe, aby ruch respektował ustawienie systemowe.
Własne keyframes działające na żywo
Wiggle, fade up i karta szkieletowa
Odpowiedniki w czystym CSS powyższych własnych klas, abyś mógł edytować czas i obserwować zmiany.
Wbudowane animacje na żywo
Każdy podgląd używa prawdziwej klasy Tailwind. Włącz podgląd ograniczonego ruchu, aby zobaczyć działanie motion-safe.
Podgląd ograniczonego ruchu: włączony
Podgląd ograniczonego ruchu: wyłączony
Kreator klatek kluczowych
Wybierz ruch, czas trwania, krzywą przejścia i liczbę powtórzeń, a potem skopiuj blok @theme dla Tailwind v4.