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

Jest to 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 znacznie trudniejsze ze względu na potencjalne problemy z renderowaniem i wydajnością. Ale obecnie animacje CSS mogą być używane znacznie swobodniej, a składnia jest ogólnie dużo łatwiejsza do nauczenia się 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 dotyczącym animacji klatek kluczowych CSS omówimy całą składnię, w tym każdą z różnych właściwości. Dołączę interaktywne prezentacje, które pomogą Ci zrozumieć, co jest możliwe dzięki animacjom CSS.

Składnia @keyframes

Każda animacja CSS składa się z dwóch części: jednej lub więcej animation-* właściwości wraz z zestawem klatek kluczowych animacji, które są zdefiniowane przy użyciu @keyframes rządzić. Przyjrzyjmy się szczegółowo temu, co dzieje się podczas budowania @keyframes zestaw reguł.

Składnia wygląda następująco:

@keyframes moveObject {
  0% {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  100% {
    transform: translateX(300px) scale(1.5);
  }
}

Jak pokazano tutaj, @keyframes at-rule zawiera trzy podstawowe części:

• The @keyframes reguła, po której następuje niestandardowa nazwa animacji
• Zestaw nawiasów klamrowych otaczających wszystkie klatki kluczowe
• Jedna lub więcej klatek kluczowych, każda z wartością procentową, po której następuje zestaw reguł ujęty w nawiasy klamrowe

W tym pierwszym przykładzie naszego samouczka dotyczącego animacji CSS zdefiniowałem swoją animację za pomocą nazwy moveObject. Może to być dowolna nazwa, rozróżniana jest wielkość liter i musi być zgodna z niestandardowy identyfikator reguły w CSS. Ta nazwa niestandardowa musi być zgodna z nazwą używaną w pliku animation-name właściwość (omówiona 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 równe klatki kluczowe 0% oraz 100%mogę alternatywnie użyć from oraz to słowa kluczowe:

@keyframes moveObject {
  from {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  to {
    transform: translateX(300px) scale(1.5);
  }
}

Poniższy interaktywny CodePen wykorzystuje powyższą składnię w żywym przykładzie:

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

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

• Możesz ustawić zestawy reguł klatek kluczowych w dowolnej kolejności, a przeglądarka nadal będzie je uruchamiać w kolejności określonej przez ich procent
• 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ą przekształcenia), przeglądarka użyje ostatniej
• Możesz zdefiniować wiele klatek kluczowych w jednym selektorze klatek kluczowych za pomocą przecinka: 10%, 30% { ... }
• The !important słowo kluczowe unieważnia każdą wartość właściwości, więc nie powinno być używane dla właściwości w zestawie reguł klatek kluczowych

👉Teraz, gdy dobrze rozumiesz @keyframes składni 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 tworzona animacja CSS musi mieć nazwę, która pojawia się w pliku @keyframes składnia. Ta nazwa musi być taka sama jak nazwa zdefiniowana przy użyciu pliku animation-name własność.

Używając CSS z poprzedniej wersji demonstracyjnej, składnia wygląda następująco:

.box {
  animation-name: moveObject;
}

Ponownie zdefiniowana przeze mnie nazwa niestandardowa musi również istnieć jako nazwa dla pliku a @keyframes at-rule — w przeciwnym razie ta nazwa nic nie zrobi. Możesz myśleć o tym jak o wywołanie funkcji w JavaScript. Sama funkcja byłaby @keyframes moveObject {} część kodu, podczas gdy wywołanie funkcji jest animation-name: moveObject.

Warto o tym pamiętać animation-name:

• Wartość początkowa dla animation-name jest none, co oznacza, że ​​żadne klatki kluczowe nie są aktywne. Można tego użyć jako swego rodzaju „przełącznika”, aby dezaktywować animację.
• Wybrana nazwa uwzględnia 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.
• Imię nie może być zastrzeżonym słowem, takim jak unset, initiallub inherit.

Właściwość czasu trwania animacji

The animation-duration Właściwość, co nie jest niespodzianką, 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ównoważne następującemu:

.box {
  animation-duration: 2000ms;
}

Możesz zobaczyć animation-duration właściwość w akcji w poniższej demonstracji 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 „Animuj ramkę”, aby uruchomić animację.

Jeśli użyjesz małej liczby wraz z ms dla urządzenia, 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ść funkcji czasu animacji

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

Deklaracja wygląda następująco:

.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 można stosunkowo łatwo uchwycić za pomocą nazw, ale możesz zobaczyć, jak się różnią, korzystając z następującej interaktywnej demonstracji:

Użyj opcji wyboru, aby wybrać jedną z siedmiu wartości słów kluczowych. Zauważ, że ease-* wartości „łagodzą” animację na różne sposoby. Wartość liniowa jest spójna przez cały czas.

The animation-timing-function property akceptuje również następujące funkcje:

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

Wartości słów kluczowych step-start oraz step-end są równoważne wartościom steps(1, jump-start) oraz steps(1, jump-end)odpowiednio.

Jeśli chodzi o cubic-bezier()poniższa interaktywna demonstracja może pomóc nieco lepiej zrozumieć tę funkcję:

Zauważ, że wersja demonstracyjna pozwala ustawić cztery argumenty w pliku cubic-bezier() funkcjonować. Dwa argumenty mogą być ujemne, a dwa są ograniczone do wartości dziesiętnych z zakresu od 0 do 1. Aby uzyskać przyzwoite wyjaśnienie, jak działają tego typu funkcje odmierzające czas, możesz sprawdzić Ten artykuł lub to interaktywne narzędzie.

The steps() funkcja przyjmuje dwa argumenty:

• Liczba całkowita reprezentująca równe „przystanki” w jednym cyklu animacji.
• Opcjonalne słowo kluczowe o nazwie „jumpterm”, które określa, czy animacja „trzyma się” w określonych odstępach czasu

Ponownie, interaktywna demonstracja powinna pomóc Ci zrozumieć, jak działają te terminy przejściowe:

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

Właściwość liczby iteracji animacji

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

.box {
  animation-iteration-count: 3;
}

Wartość początkowa dla animation-iteration-count jest 1 ale możesz też użyć słowa kluczowego infinite (nie wymaga wyjaśnień) lub użyj wartości ułamkowej. Wartość ułamkowa spowoduje częściowe uruchomienie animacji w przebiegu ułamkowym:

.box {
  animation-iteration-count: 3.5;
}

Powyższy kod przechodzi przez animację trzy i pół razy. To znaczy 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 animation-direction właściwość (omówiona dalej), ponieważ animacja uruchamiana tylko od początku nie jest szczególnie 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ś mógł zobaczyć efekt:

Właściwość kierunku animacji

Jak wspomniano powyżej w tym samouczku dotyczącym animacji CSS, plik animation-direction właściwość działa dobrze w połączeniu z animation-iteration-count. The animation-direction pozwala określić kierunek, w którym ma być odtwarzana animacja. Składnia wygląda następująco:

.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 zmienia się w kolejnych iteracjach
• alternate-reverse – Taki sam jak alternate ale odtwarza wstecz w pierwszej iteracji

Możesz wypróbować różne wartości z różnymi liczbami iteracji, korzystając z poniższej interaktywnej demonstracji:

Właściwość stanu odtwarzania animacji

The animation-play-state właściwość nie jest szczególnie przydatna w statycznym środowisku CSS, ale może się przydać podczas pisania animacji, które są interaktywne za pośrednictwem JavaScript lub nawet CSS.

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

.box {
  animation-direction: paused;
}

Domyślnie dowolna animacja jest w stanie „uruchomiona”. 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 „wstrzymany”, co zasadniczo zatrzymuje animację w dowolnym miejscu w bieżącej iteracji.

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

Właściwość opóźnienia animacji

Niektóre animacje zaprojektowano tak, aby rozpoczynały się natychmiast, podczas gdy inne mogą zyskać na niewielkim opóźnieniu przed pierwszą iteracją. The animation-delay właściwość pozwala to osiągnąć.

.box {
  animation-delay: 4s;
}

Podobnie jak inne wartości oparte na czasie, możesz ustawić animation-delay do wartości za pomocą sekund lub milisekund. 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 interaktywnej demonstracji poniżej:

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

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

Właściwość trybu animacji wypełnienia

Ostatnią właściwością odręczną, którą omówię w tym samouczku dotyczącym animacji CSS, jest ta, której użyłem w poprzedniej wersji demonstracyjnej. Zauważysz, że kiedy animacja zatrzymuje ostatnią iterację, pudełko pozostaje tam, gdzie jest. Osiąga się to za pomocą animation-fill-mode.

.box {
  animation-fill-mode: forwards;
}

Ta właściwość określa, w jaki sposób animacja stosuje style do elementu docelowego przed i po jego wykonaniu. Jest to trochę trudne do zrozumienia koncepcyjnie, 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, żadne style nie są stosowane przed ani 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, gdy tylko rozpocznie się jej wykonywanie, ale przed rozpoczęciem animacji
• both – Zachowuje style dla obu forwards oraz backwards

Końcowe demo w tym samouczku dotyczącym animacji CSS sprawi, że wszystko stanie się nieco jaśniejsze, ale to może zająć dużo czasu, zanim naprawdę zrozumiesz, co robi i jak to osiąga.

Dla wygody dodałem wszystkie dema do pojedyncza kolekcja 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 uczynić wartości trybu wypełnienia nieco bardziej wyraźnymi. Jeśli nadal nie do końca rozumiesz, jak to zrobić animation-fill-mode działa, możesz sprawdzić starszy artykuł Napisałem, że dyskutuje animation-fill-mode dogłębne.

Skrócona właściwość animacji

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

Gdy dobrze zrozumiesz każdą z właściwości, masz możliwość użycia animation shorthand, która pozwala zdefiniować wszystkie właściwości longhand 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. Zalecałbym używanie 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 pamiętaj o następujących zasadach:

• Pierwszą wartością określającą czas jest tzw animation-duration; każda kolejna wartość czasu to animation-delay.
• Jeśli istnieje konflikt między słowem kluczowym a animation-namewartość 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 dowolnej skróconej właściwości CSS.

Stosowanie wielu animacji do jednego elementu

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

Oto przykład użycia skrótu:

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

Tutaj zdefiniowałem dwie różne animacje, które byłyby mapowane na dwa różne zestawy klatek kluczowych, ale miałyby zastosowanie do tego samego obiektu. Ten sam kod można zapisać 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 dotyczącego animacji CSS

👉 Ostatnie ostrzeżenie: używaj animacji z umiarem i pamiętaj, że niektórzy użytkownicy sieci mogą mieć negatywny wpływ na migające kolory i inne szybko poruszające się obiekty.