Samouczek animacji CSS: kompletny przewodnik dla początkujących

To jest pełny przewodnik po składni i interaktywny samouczek animacji CSS dla początkujących. Użyj go jako odniesienia, aby poznać różne części specyfikacji animacji CSS.

Wydajność przeglądarek przeszła długą drogę w ciągu ostatnich 10 lat. Kiedyś dodawanie interaktywnych animacji do stron internetowych było o wiele trudniejsze ze względu na potencjalne problemy z renderowaniem i wydajnością. Ale w dzisiejszych czasach animacje CSS mogą być używane znacznie swobodniej, a składnia jest ogólnie znacznie łatwiejsza do nauczenia w porównaniu z funkcjami CSS, takimi jak grid czy flexbox.

Istnieją różne funkcje, które są częścią specyfikacji animacji W3C CSS. Niektóre łatwiejsze w użyciu niż inne. W tym samouczku animacji klatek kluczowych CSS omówimy całą składnię, w tym każdą z różnych właściwości. Dołączę interaktywne demonstracje, które pomogą Ci zrozumieć, co jest możliwe dzięki animacjom CSS.

Składnia @klatek kluczowych

Każda animacja CSS składa się z dwóch części: jednej lub więcej właściwości animation-* wraz z zestawem klatek kluczowych animacji, które są zdefiniowane za pomocą reguły @keyframes at. Przyjrzyjmy się szczegółowo, jak zbudować zestaw reguł @keyframes .

Składnia wygląda tak:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

Jak pokazano tutaj, @keyframes składa się z trzech podstawowych części:

• Reguła @keyframes , po której następuje niestandardowa nazwa animacji
• Zestaw nawiasów klamrowych otaczających wszystkie klatki kluczowe
• Co najmniej jedna klatka kluczowa, każda z wartością procentową, po której następuje zestaw reguł otoczony nawiasami klamrowymi

W tym pierwszym przykładzie naszego samouczka animacji CSS, zdefiniowałem moją animację o nazwie moveObject . Może to być dowolna nazwa, którą chcę, uwzględnia wielkość liter i musi przestrzegać niestandardowych reguł identyfikatorów w CSS. Ta nazwa niestandardowa musi odpowiadać nazwie użytej we właściwości animation-name (omówionej później).

W moim przykładzie zauważysz, że użyłem wartości procentowych do zdefiniowania każdej klatki kluczowej w mojej animacji. Jeśli moja animacja zawiera klatki kluczowe równe 0% i 100% , mogę alternatywnie użyć słów kluczowych from i to :

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

Poniższy interaktywny CodePen używa powyższej składni w przykładzie na żywo:

W demie zamieściłem przycisk, który resetuje animację. Wyjaśnię później, dlaczego jest to potrzebne. Ale na razie pamiętaj, że ta animacja zawiera trzy klatki kluczowe, które reprezentują kroki w tej sekwencji animacji: początek, 50% krok i koniec (tj. 0%, 50% i 100%). Każdy z nich używa tak zwanego selektora klatek kluczowych wraz z nawiasami klamrowymi, aby zdefiniować właściwości na tym etapie.

Kilka rzeczy do zapamiętania na temat składni @keyframes :

• Możesz ustawić zestawy reguł klatek kluczowych w dowolnej kolejności, a przeglądarka nadal będzie je uruchamiać w kolejności określonej na podstawie ich wartości procentowych
• Możesz pominąć klatki kluczowe 0% i 100%, a przeglądarka automatycznie określi je na podstawie istniejących stylów animowanego elementu
• Jeśli istnieją zduplikowane klatki kluczowe z różnymi zestawami reguł (np. dwie klatki kluczowe dla 20% z inną wartością transformacji), przeglądarka używa ostatniej
• Możesz zdefiniować wiele klatek kluczowych w selektorze pojedynczej klatki kluczowej za pomocą przecinka: 10%, 30% ...
• Słowo kluczowe !important unieważnia każdą wartość właściwości, więc nie powinno być używane we właściwościach w zestawie reguł klatek kluczowych

Teraz, gdy dobrze rozumiesz składnię @keyframes w tym samouczku animacji CSS, przyjrzyjmy się różnym właściwościom animacji, które są zdefiniowane w animowanym elemencie.

Właściwości animacji, które omówimy:

Właściwość nazwa-animacji

Jak wspomniano, każda utworzona animacja CSS musi mieć nazwę, która pojawia się w składni @keyframes . Ta nazwa musi być taka sama, jak nazwa zdefiniowana za pomocą właściwości animation-name .

Używając CSS z poprzedniego demo, składnia wygląda tak:

 .box animation-name: moveObject;

Ponownie, zdefiniowana przeze mnie niestandardowa nazwa musi również istnieć jako nazwa reguły @keyframes — w przeciwnym razie ta nazwa nic nie da. Możesz myśleć o tym jak o wywołaniu funkcji w JavaScript. Sama funkcja byłaby częścią kodu @keyframes moveObject , podczas gdy wywołanie funkcji to animation-name: moveObject .

Kilka rzeczy, o których należy pamiętać w animation-name :

• Wartość początkowa animation-name to none , co oznacza, że ​​żadne klatki kluczowe nie są aktywne. Może to być używane jako rodzaj „przełącznika”, aby dezaktywować animację.
• W wybranej nazwie jest rozróżniana wielkość liter i może zawierać litery, cyfry, podkreślenia i łączniki.
• Pierwszy znak w nazwie musi być literą lub łącznikiem, ale tylko pojedynczym łącznikiem.
• Nazwa nie może być słowem zastrzeżonym, takim jak unset , initial lub inherit .

Właściwość czasu trwania animacji

Właściwość animation-duration , bez niespodzianek, określa ilość czasu potrzebnego na jednokrotne uruchomienie animacji od początku do końca. Tę wartość można określić w sekundach lub milisekundach, jak pokazano poniżej:

 .box animation-duration: 2s;

Powyższe byłoby równoznaczne z następującym:

 .box animation-duration: 2000ms;

Możesz zobaczyć właściwość animation-duration w akcji w następującym demo CodePen. W tym demo możesz wybrać, jak długo ma trwać animacja. Spróbuj wprowadzić różne wartości w sekundach lub milisekundach, a następnie użyj przycisku „Animate the Box”, aby uruchomić animację.

Jeśli użyjesz małej liczby wraz z ms dla jednostki, możesz nawet nie zauważyć żadnego ruchu. Spróbuj ustawić wyższą liczbę, jeśli używasz milisekund.

Kilka uwag na temat używania animation-duration :

• Wartości ujemne są nieprawidłowe
• Jednostka musi być uwzględniona, nawet jeśli czas trwania jest ustawiony na 0s (wartość początkowa)
• Możesz użyć wartości ułamkowych (np. 0.8s )

Właściwość animacja-timing-funkcja

Funkcja animation-timing-function , która nie jest tak oczywista w swoim znaczeniu jak dwie poprzednie właściwości, służy do definiowania sposobu, w jaki animacja CSS postępuje. To może nie być najjaśniejsze wyjaśnienie, ale składnia może pomóc w wyjaśnieniu.

Deklaracja wygląda tak:

 .box animation-timing-function: linear;

Ta właściwość akceptuje następujące wartości słów kluczowych:

• ease (wartość początkowa)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Większość wartości jest stosunkowo łatwa do uchwycenia po ich nazwach, ale możesz zobaczyć, jak się różnią, korzystając z następującego interaktywnego demo:

Użyj danych wejściowych select, aby wybrać jedną z siedmiu wartości słów kluczowych. Zwróć uwagę, że ease-* wartości 'łatwość' animacji na różne sposoby. Wartość liniowa jest przez cały czas spójna.

Właściwość animation-timing-function przyjmuje również następujące funkcje:

• cubic-bezier() – przyjmuje jako argumenty cztery wartości liczbowe oddzielone przecinkami
• steps() – przyjmuje jako argumenty dwie wartości, liczbę i „termin przeskoku”, oddzielone przecinkiem

Wartości słów kluczowych step-start i step-end są odpowiednikami odpowiednio wartości steps(1, jump-start) i steps(1, jump-end) .

Jeśli chodzi o cubic-bezier() , poniższe interaktywne demo może pomóc w lepszym zrozumieniu funkcji:

Zauważ, że demo pozwala ustawić cztery argumenty w funkcji cubic-bezier() . Dwa argumenty mogą być ujemne, a dwa są ograniczone do wartości dziesiętnych z zakresu od 0 do 1. Aby uzyskać porządne wyjaśnienie, jak działają te typy funkcji pomiaru czasu, zapoznaj się z tym artykułem lub tym interaktywnym narzędziem.

Z kolei funkcja steps() przyjmuje dwa argumenty:

• Liczba całkowita reprezentująca równe „zatrzymania” w pojedynczym cyklu animacji.
• Opcjonalne słowo kluczowe zwane „jumpterm”, które określa, czy animacja „zatrzymuje się” w określonych odstępach czasu

Ponownie, interaktywne demo powinno pomóc ci zrozumieć, jak działają te jumpterms:

Spróbuj wybrać liczbę całkowitą wraz z terminem przejściowym (lub wypróbuj go bez terminu przejściowego), aby zobaczyć, jak różne słowa kluczowe różnią się przy różnych wartościach liczb całkowitych. Najwyraźniej ujemne liczby całkowite są dozwolone, ale nie widzę żadnej różnicy między 0 a ujemną wartością.

Właściwość animation-iteration-count

W niektórych przypadkach będziesz zadowolony, jeśli animacja zostanie uruchomiona raz, ale czasami chcesz, aby animacja była uruchamiana wiele razy. Właściwość animation-iteration-count pozwala to zrobić, akceptując dodatnią liczbę reprezentującą liczbę uruchomień animacji:

 .box animation-iteration-count: 3;

Początkowa wartość parametru animation-iteration-count to 1 , ale możesz też użyć słowa kluczowego infinite (nie wymaga wyjaśnień) lub użyć wartości ułamkowej. Wartość ułamkowa uruchomi część animacji w przebiegu ułamkowym:

 .box animation-iteration-count: 3.5;

Powyższy kod przechodzi przez animację trzy i pół razy. Oznacza to trzy pełne iteracje, po których następuje jedna końcowa iteracja, która zatrzymuje się dokładnie w połowie.

Ta właściwość jest najbardziej użyteczna, gdy jest używana w połączeniu z właściwością animation-direction (omówioną dalej), ponieważ animacja uruchamiana tylko od początku nie jest zbyt użyteczna, jeśli jest uruchamiana więcej niż raz.

Możesz wypróbować poniższe demo, które pozwala wybrać wartość ułamkową dla liczby iteracji, aby zobaczyć efekt:

Właściwość kierunku animacji

Jak wspomniano powyżej w tym samouczku dotyczącym animacji CSS, właściwość animation-direction działa dobrze w połączeniu z animation-iteration-count . Właściwość animation-direction umożliwia określenie kierunku, w którym animacja ma być odtwarzana. Składnia wygląda tak:

 .box animation-direction: alternate;

Możesz ustawić wartość jako jedno z czterech słów kluczowych:

• normal – animacja jest odtwarzana do przodu w pierwszej iteracji (domyślnie)
• reverse – animacja jest odtwarzana wstecz w pierwszej iteracji
• alternate – animacja jest odtwarzana do przodu w pierwszej iteracji, a następnie naprzemiennie w kolejnych iteracjach
• alternate-reverse – To samo co alternate , ale odtwarzana wstecz w pierwszej iteracji

Możesz wypróbować różne wartości z różnymi liczbami iteracji, korzystając z interaktywnego demo poniżej:

Właściwość animacja-odtwarzanie-stan

Właściwość animation-play-state nie jest szczególnie przydatna w statycznym środowisku CSS, ale może się przydać podczas pisania animacji interaktywnych za pomocą JavaScript, a nawet CSS.

Ta właściwość przyjmuje dwie wartości: running lub paused :

 .box animation-direction: paused;

Domyślnie każda dana animacja jest w stanie „uruchomienia”. Ale możesz użyć JavaScript, aby przełączyć wartość właściwości. Możesz nawet użyć interaktywnej funkcji CSS, takiej jak :hover lub :focus , aby zmienić animację w stan „wstrzymania”, co zasadniczo zatrzymuje animację w dowolnym miejscu bieżącej iteracji.

Poniższa interaktywna demonstracja zawiera animację działającą w nieskończoność z dwoma przyciskami do „wstrzymania” i „wznawiania” animacji.

Właściwość Animation-Delay

Niektóre animacje są zaprojektowane tak, aby rozpocząć animację natychmiast, podczas gdy inne mogą skorzystać z niewielkiego opóźnienia przed pierwszą iteracją. Właściwość animation-delay pozwala to osiągnąć.

 .box animation-delay: 4s;

Podobnie jak inne wartości oparte na czasie, możesz ustawić animation-delay na wartość w sekundach lub milisekundach. Możesz także użyć wartości ułamkowych.

Należy zauważyć, że opóźnienie występuje tylko w pierwszej iteracji, a nie w każdej iteracji. Możesz to wypróbować, korzystając z interaktywnego demo poniżej:

Demo daje możliwość zmiany wartości iteracji oraz opóźnienia, dzięki czemu widać, że opóźnienie nie wpływa na żadne kolejne iteracje – tylko na pierwszą.

Ciekawym sposobem wykorzystania tej właściwości jest ujemna wartość. Na przykład, korzystając z powyższej demonstracji, spróbuj ustawić animation-delay na -0.5s . Zauważysz, że ujemne opóźnienie działa prawie tak, jak wehikuł czasu – animacja zaczyna się w połowie, a nie na początku.

Właściwość Animation-fill-mode

Ostatnia odręczna właściwość, którą omówię w tym samouczku animacji CSS, to ta, której użyłem w poprzednim demo. Zauważysz, że kiedy animacja zatrzymuje ostatnią iterację, pudełko pozostaje na swoim miejscu. Odbywa się to za pomocą animation-fill-mode .

 .box animation-fill-mode: forwards;

Ta właściwość określa sposób, w jaki animacja stosuje style do elementu docelowego przed i po jego wykonaniu. Jest to trochę trudne do uchwycenia pojęciowo, więc omówię znaczenie każdej wartości; następnie możesz porównać wartości za pomocą interaktywnego demo.

Ta właściwość akceptuje następujące cztery wartości słów kluczowych:

• none – domyślnie, brak stylów stosowanych przed lub po wykonaniu
• forwards – zachowuje wszystkie style zastosowane w ostatniej klatce kluczowej animacji
• backwards — mniej więcej odwrotność poprzedniej wartości, zachowuje style zastosowane do animacji zaraz po rozpoczęciu wykonywania, ale przed rozpoczęciem animacji
• both – zachowuje style zarówno forwards , jak i backwards

Ostateczne demo w tym samouczku animacji CSS sprawi, że wszystko stanie się nieco jaśniejsze, ale to może wymagać dużo zabawy, zanim naprawdę zrozumiesz, co robi i jak to osiąga.

Dla wygody dodałem wszystkie dema do jednej kolekcji CodePen.

Zauważysz, że demo pozwala dostosować tryb wypełnienia, opóźnienie, kierunek i liczbę iteracji, ponieważ wszystko to może mieć wpływ na wygląd. Dodałem również inny kolor tła do animowanego pola w pierwszej klatce kluczowej, co ponownie pomaga nieco rozjaśnić wartości trybu wypełniania. Jeśli nadal nie rozumiesz, jak działa animation-fill-mode , możesz zapoznać się ze starszym artykułem, który napisałem, który szczegółowo omawia animation-fill-mode .

Właściwość skrócona animacji

Omówiłem osiem różnych właściwości w tym samouczku animacji CSS dla początkujących i zachęcam do korzystania z długiej ręki. Ułatwi ci to zobaczenie zestawu wartości jawnych.

Gdy już dobrze zrozumiesz każdą z właściwości, możesz użyć skróconej właściwości animation , która pozwala zdefiniować wszystkie odręczne właściwości w jednej deklaracji.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

Szczerze mówiąc, to dużo informacji w jednym wierszu. Sugerowałbym użycie skrótu, jeśli deklaracja nie zawiera wszystkich właściwości, ale może tylko trzy lub cztery z nich.

Jeśli używasz skrótu, możesz ustawić wartości w dowolnej kolejności, ale zwróć uwagę na następujące zasady:

• Pierwsza wartość definiująca czas to animation-duration ; każda kolejna wartość czasu to animation-delay .
• Jeśli występuje konflikt między słowem kluczowym a animation-name , wartość słowa kluczowego będzie miała pierwszeństwo, jeśli pojawi się jako pierwsza.
• Wszelkie pominięte wartości powrócą do stanu początkowego, tak jak w przypadku każdej skróconej właściwości CSS.

Stosowanie wielu animacji do jednego elementu

Ostatnią cechą, o której warto wiedzieć, jest możliwość zastosowania wielu animacji do jednego obiektu, oddzielając je przecinkami.

Oto przykład z użyciem skrótu:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

Tutaj zdefiniowałem dwie różne animacje, które będą mapować do dwóch różnych zestawów klatek kluczowych, ale będą miały zastosowanie do tego samego obiektu. Ten sam kod można napisać odręcznie jako:

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

Zwróć uwagę, że każda właściwość zawiera dwie wartości oddzielone przecinkami. W tym przypadku skrót byłby prawie na pewno łatwiejszy do odczytania i utrzymania.

Podsumowanie tego samouczka animacji CSS

Ostatnie ostrzeżenie: używaj animacji z umiarem i pamiętaj, że na niektórych użytkowników sieci mogą negatywnie wpływać migające kolory i inne szybko poruszające się obiekty.