Animacje CSS z użyciem keyframes w React

Reguła @keyframes opisuje wieloetapową animację, określając wartości właściwości w punktach osi czasu za pomocą from/to lub wartości procentowych, takich jak 0%, 50% i 100%.

W przeciwieństwie do przejść klatki kluczowe mogą opisywać złożony, wieloetapowy ruch, który działa samodzielnie, bez zmiany stanu na każdym etapie.

Zestaw klatek kluczowych stosuje się za pomocą właściwości animation: animation: slideIn 400ms ease forwards. Łączy ona nazwę, czas trwania, funkcję czasową i tryb wypełnienia.

Tryb wypełnienia forwards zachowuje wartości elementu z ostatniej klatki kluczowej po zakończeniu animacji, zapobiegając nagłemu powrotowi do stanu początkowego.

W React zazwyczaj dodaje się klasę zawierającą deklarację animation, gdy stan przyjmuje wartość true. Na przykład dodanie is-entering uruchamia klatki kluczowe w chwili zamontowania elementu lub zmiany wartości flagi.

Dzięki temu logika animacji pozostaje w CSS, a React jedynie decyduje, kiedy dołączyć klasę.

animation-fill-mode określa, jakie style obowiązują przed rozpoczęciem animacji i po jej zakończeniu. forwards zachowuje ostatnią klatkę kluczową, backwards stosuje pierwszą klatkę kluczową podczas ewentualnego opóźnienia, a both robi jedno i drugie.

Bez forwards element animujący się do stanu pełnej widoczności powróciłby do niewidoczności po zakończeniu animacji.

animation-direction: alternate odtwarza animację do przodu, a następnie do tyłu przy każdym powtórzeniu. W połączeniu z animation-iteration-count: infinite tworzy płynny ruch tam i z powrotem, przypominający pulsowanie lub oddychanie.

Jest to przydatne w przypadku wskaźników ładowania lub subtelnych animacji przyciągających uwagę.

animation-play-state może przyjmować wartość running lub paused. Można sterować nim na podstawie stanu Reacta, na przykład wstrzymywać przewijany tekst po najechaniu, przełączając klasę.

Ponieważ animacja zostaje wstrzymana, a nie zresetowana, wznawia się dokładnie od miejsca, w którym się zatrzymała.

Animacja klatkowa odtwarza się tylko raz, gdy jej klasa zostanie zastosowana po raz pierwszy; ponowne dodanie tej samej klasy jej nie uruchomi. Najprostszym rozwiązaniem w React jest zmiana właściwości key elementu, aby React zamontował nowy węzeł i odtworzył animację od początku.

Na przykład key={count} na powiadomieniu typu toast powoduje jego ponowne zamontowanie za każdym razem, gdy wartość count wzrośnie.

Niektórzy użytkownicy włączają ograniczenie ruchu w systemie operacyjnym ze względów komfortu lub dostępności. Animacje nieistotne dla działania interfejsu należy umieścić w @media (prefers-reduced-motion: reduce) i tam je wyłączyć lub skrócić.

Respektowanie tego ustawienia sprawia, że interfejs jest bardziej dostępny i nie powoduje dyskomfortu.

Aby animować elementy w momencie, gdy pojawiają się w obszarze widocznym, należy użyć IntersectionObserver w useEffect. Gdy obserwowany element stanie się widoczny, aktualizuje się stan, co dodaje klasę animacji.

W ten sposób można uzyskać efekty pojawiania się podczas przewijania bez obciążających nasłuchiwaczy przewijania uruchamianych przy każdej klatce.

animation-delay określa, kiedy rozpoczyna się każda animacja klatkowa, dzięki czemu można je rozłożyć w czasie. Nadanie elementom listy coraz większych opóźnień sprawia, że animują się po kolei, tworząc zaplanowany efekt pojawiania się.

Opóźnienie dla każdego elementu można obliczyć w React za pomocą style={{ animationDelay: i * 80 + 'ms' }}.

Przejść należy używać do prostych zmian między dwoma stanami wywoływanych interakcją, a klatek kluczowych wtedy, gdy potrzebny jest ruch składający się z wielu etapów, zapętlenie lub animacja działająca niezależnie od przełączania stanu.

Oba rozwiązania są oparte wyłącznie na CSS, więc React decyduje tylko o tym, kiedy dołączyć klasy, a przeglądarka obsługuje poszczególne klatki.

Sprawdź swoją wiedzę na temat działania animacji klatkowych.

Dowiedział się Pan, jak definiować @keyframes, stosować je za pomocą skróconej właściwości animation, sterować trybem wypełnienia i kierunkiem, wstrzymywać animacje i uruchamiać je ponownie, a także pokazywać elementy podczas przewijania za pomocą IntersectionObserver.

Poznał Pan również sposób respektowania prefers-reduced-motion na potrzeby dostępnych animacji.