Niestandardowe animacje w konfiguracji

Cztery wbudowane animacje Tailwind obejmują typowe wzorce ładowania i przyciągania uwagi, ale rzeczywiste projekty często wymagają dodatkowych animacji: efektów pojawiania się treści, wysuwanych paneli bocznych, efektów potrząsania przy błędach formularza czy niestandardowych odmian pulsowania. Dodając wpisy do theme.extend.keyframes i theme.extend.animation w konfiguracji, tworzysz nowe narzędzia animate-*, które działają dokładnie tak jak narzędzia wbudowane.

Dodaj niestandardowe klatki kluczowe CSS w theme.extend.keyframes. Każdy klucz w obiekcie staje się nazwą klatki kluczowej. Wartość jest obiektem, w którym kluczami są ciągi znaków zawierające wartości procentowe lub słowa kluczowe 'from'/'to', a wartościami — obiekty właściwości CSS. Tailwind przekształca tę notację obiektową w regułę CSS @keyframes w skompilowanym wyniku. W krokach klatki kluczowej można użyć dowolnej animowalnej właściwości CSS.

Po zdefiniowaniu klatek kluczowych zarejestruj je jako nazwane animacje w theme.extend.animation. Wartość jest skróconym zapisem animacji CSS: name duration timing-function delay iteration-count direction fill-mode. Nazwa musi odpowiadać klatce kluczowej zdefiniowanej w theme.extend.keyframes. Tailwind generuje klasę narzędzia animate-{key} dla każdego wpisu.

Po zarejestrowaniu w konfiguracji niestandardowe animacje są dostępne w kodzie HTML jako klasy animate-{key}. Działają dokładnie tak samo jak wbudowane narzędzia animate i można je łączyć z prefiksami responsywnymi, wariantami stanów oraz wariantem motion-reduce: na potrzeby dostępności. Animacja jest odtwarzana, gdy klasa jest obecna, i zatrzymuje się po jej usunięciu — idealnie nadaje się to do efektów pojawiania się wyzwalanych przez JavaScript.

Animacje pojawiania się (fade-in, slide-up, scale-in) sprawiają, że treść wygląda dynamicznie w chwili wyświetlania. Są najbardziej skuteczne, gdy treść po raz pierwszy pojawia się w obszarze widocznym na ekranie — podczas ładowania strony lub gdy sekcja staje się widoczna w trakcie przewijania. Czas trwania animacji powinien wynosić od 200 do 400 ms; zawsze należy też dobrać odpowiednią funkcję easing. W JavaScript należy użyć Intersection Observer API, aby uruchamiać animacje, gdy elementy pojawiają się w obszarze widocznym podczas przewijania.

Złożone animacje wykorzystują więcej punktów procentowych klatek kluczowych, aby tworzyć ruch składający się z wielu etapów. Animacja bicia serca najpierw powiększa element, a następnie go pomniejsza, tworząc rytm podwójnego uderzenia. Animacja rozbłysku na krótko wyróżnia element za pomocą koloru tła. Animacja slide-in-right jednocześnie przesuwa element i zmienia jego przezroczystość. Takie animacje złożone wymagają wielu punktów procentowych, aby precyzyjnie opisać każdy etap ruchu.

Właściwość CSS animation-fill-mode określa, co dzieje się przed rozpoczęciem animacji (jeśli ustawiono opóźnienie) i po jej zakończeniu. forwards pozostawia element w stanie końcowym po zakończeniu animacji — ma to kluczowe znaczenie w przypadku jednorazowych animacji pojawiania się, gdy element powinien pozostać widoczny. backwards stosuje pierwszą klatkę w czasie opóźnienia, dzięki czemu elementy rozpoczynają animację we właściwym stanie początkowym. Tryb wypełnienia należy uwzględnić w skróconym zapisie animacji.

Animację Tailwind można wstrzymać za pomocą animation-play-state: paused. Należy dodać niestandardową klasę narzędziową lub użyć wartości arbitralnej: [animation-play-state:paused]. Jest to przydatne na przykład do wstrzymywania animacji ładowania, gdy strona nie jest widoczna (z użyciem Page Visibility API), albo do wstrzymywania animacji najechania, aby dać użytkownikom czas na interakcję z treścią. Tailwind nie udostępnia wbudowanego narzędzia do wstrzymywania, ale arbitralny CSS lub niestandardowe narzędzie w zupełności wystarczą.

Każda utworzona niestandardowa animacja powinna mieć również obsługę wariantu motion-reduce:. Najprostsze podejście to motion-reduce:animate-none, które całkowicie wyłącza animację. W przypadku animacji pojawiania się, gdy końcowy stan ma nadal być widoczny, należy użyć motion-reduce:opacity-100 razem z motion-reduce:animate-none, aby element pozostał widoczny nawet po pominięciu animacji fade-in.

W przypadku bardziej zaawansowanych animacji — fizyki sprężystości, animacji sterowanych przewijaniem lub złożonej choreografii — biblioteki innych firm, takie jak tailwindcss-animate, Framer Motion (React) czy GSAP, dobrze integrują się z Tailwind. Tailwindcss-animate udostępnia jako wtyczka bogaty zestaw gotowych klatek kluczowych (accordion-down, accordion-up, fade-in itd.), natychmiast rozszerzając dostępne narzędzia animate-*. Jest domyślnie używana w komponentach shadcn/ui.

Do sprawdzania i debugowania niestandardowych animacji należy użyć panelu Animations w Chrome DevTools. Należy wybrać element w panelu Elements, a następnie otworzyć panel Animations. Po uruchomieniu animacji pojawi się wizualizacja krzywej klatek kluczowych wraz ze znacznikami czasu. Można spowolnić odtwarzanie do prędkości 0,25x, aby dokładnie przeanalizować każdy etap. Panel umożliwia również ponowne odtwarzanie animacji na żądanie, co jest znacznie wygodniejsze niż odświeżanie strony w celu przechwycenia animacji pojawiania się.

W tej lekcji nauczyłeś się: definiować niestandardowe klatki kluczowe w theme.extend.keyframes i rejestrować je jako narzędzia w theme.extend.animation, używać animation fill-mode forwards w jednorazowych animacjach pojawiania się, które powinny zachować stan końcowy, oraz zawsze łączyć niestandardowe animacje z motion-reduce:animate-none na potrzeby dostępności. To kończy kurs Animacje i przejścia — teraz zbudujemy dopracowane wzorce komponentów.