Animacje

Animacja to świetny sposób na wyróżnienie interaktywnych elementów oraz wzbudzenie zainteresowania i zainteresowania Twoimi projektami. Z tego modułu dowiesz się, jak dodawać efekty animacji i zarządzać nimi za pomocą CSS.

Czasami interfejs ma pomocników, których kliknięcie dostarcza przydatnych informacji o konkretnej sekcji. Mają one często pulsującą animację, która subtelnie sygnalizuje, że informacje znajdują się w danej witrynie i można z nią wejść w interakcję. Jak to zrobić za pomocą arkusza CSS?

W CSS możesz tworzyć takie animacje za pomocą animacji CSS, które umożliwiają ustawienie sekwencji animacji za pomocą klatek kluczowych. Animacje mogą być proste, tylko w jednym stanie, a nawet złożone sekwencje czasowe.

Czym jest klatka kluczowa?

W oprogramowaniu do animacji, CSS i większości innych narzędzi, które umożliwiają animowanie czegoś, klatki kluczowe to mechanizm służący do przypisywania stanów animacji do sygnatur czasowych na osi czasu.

Użyjmy tu „pulsometr” jako kontekstu. Cała animacja trwa 1 sekundę i obejmuje 2 stany.

Każdy z tych stanów animacji ma swój początek i koniec. Mapujesz je na osi czasu za pomocą klatek kluczowych.

@keyframes

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

Wiesz już, czym jest klatka kluczowa, więc ta wiedza pomoże Ci zrozumieć, jak działa reguła CSS @keyframes. Oto podstawowa reguła z dwoma stanami.

@keyframes my-animation {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0px);
    }
}

Pierwszym elementem, na który warto zwrócić uwagę, jest niestandardowy identyfikator (identyfikator niestandardowy) – w bardziej ludzki sposób nazwa reguły klatek kluczowych. Identyfikator tej reguły to my-animation. Niestandardowy identyfikator działa jak nazwa funkcji. Jak już wiesz z modułu funkcji, pozwala odwoływać się do reguł klatek kluczowych w innym miejscu kodu CSS.

Uwaga: atrybut <custom-ident> jest używany w różnych miejscach w CSS i umożliwia podanie własnej nazwy rzeczy. W identyfikatorach rozróżniana jest wielkość liter, a w niektórych przypadkach występują słowa, których nie można używać. Na przykład w nazwach wierszy w siatce CSS nie możesz użyć słowa span.

Wewnątrz reguły klatek kluczowych from i to to słowa kluczowe, które reprezentują 0% i 100%, czyli początek i koniec animacji. W takim przypadku możesz odtworzyć taką samą regułę:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

W wybranym okresie możesz dodać dowolną liczbę pozycji. W kontekście przykładu z ruchem pulsującym mamy 2 stany, które przekładają się na 2 klatki kluczowe. Oznacza to, że w regule klatek kluczowych są 2 pozycje, które odzwierciedlają zmiany zachodzące w każdej z tych klatek.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Właściwości animation

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

Aby użyć elementu @keyframes w regule CSS, określ różne właściwości animacji lub użyj skrótu właściwości animation.

animation-duration

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

.my-element {
    animation-duration: 10s;
}

Właściwość animation-duration określa, jak długo powinna być oś czasu @keyframes. Powinna to być wartość czasu. Domyślna wartość to 0 sekund, co oznacza, że animacja jest nadal odtwarzana, ale zbyt szybka, by ją zobaczyć. Nie można dodawać ujemnych wartości czasu.

animation-timing-function

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

Aby odtworzyć w animacji naturalny ruch, możesz użyć funkcji czasu, które obliczają szybkość animacji w każdym punkcie. Obliczone wartości są często zakrzywione, dzięki czemu animacja biegnie ze zmienną szybkością w okresie animation-duration. Jeśli wartość jest obliczana poza wartością określoną w @keyframes, element sprawia wrażenie odbijania się.

W CSS jest kilka słów kluczowych dostępnych w postaci gotowych ustawień, które służą jako wartości w funkcji animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

W przypadku funkcji wygładzania wartości wydają się krzywe, ponieważ wygładzanie jest obliczane za pomocą krzywej ułatwienia dostępu, która służy do modelowania prędkości. Każde słowo kluczowe w funkcji czasu, np. ease, odwołuje się do wstępnie zdefiniowanej krzywej Baidu. W CSS możesz bezpośrednio zdefiniować krzywą belizera za pomocą funkcji cubic-bezier(), która akceptuje 4 wartości liczbowe: x1, y1, x2 oraz y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Wartości te nanoszą każdą część krzywej wzdłuż osi X i Y.

Zrozumienie krzywych béziera jest bardzo pomocne, a narzędzia wizualne, takie jak ten generator Lei Verou, są bardzo pomocne.

Funkcja wygładzania steps

Czasami potrzebna Ci jest bardziej szczegółowa kontrola nad animacją, ale zamiast przesuwać się wzdłuż krzywej, wolisz raczej poruszać się po niej w odstępach czasowych. Funkcja wygładzania steps() pozwala podzielić oś czasu na zdefiniowane, równe przedziały.

.my-element {
    animation-timing-function: steps(10, end);
}

Pierwszy argument to liczba kroków. Jeśli kroki są zdefiniowane jako 10 i masz 10 klatek kluczowych, każda z nich zostanie odtworzona w sekwencji przez dokładnie określony czas, bez przejść między stanami. Jeśli nie ma wystarczającej liczby klatek kluczowych dla tych kroków, kroki między klatkami kluczowymi są dodawane w zależności od drugiego argumentu.

Drugi argument to kierunek. Jeśli domyślna wartość to end, czynności kończą się na końcu osi czasu. Jeśli ma wartość start, pierwszy krok animacji kończy się natychmiast po rozpoczęciu, co oznacza, że kończy się o jeden krok przed upływem end.

animation-iteration-count

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

.my-element {
    animation-iteration-count: 10;
}

Właściwość animation-iteration-count określa, ile razy oś czasu @keyframes ma być uruchamiana. Domyślna wartość wynosi 1, co oznacza, że po osiągnięciu końca osi czasu animacja zatrzymuje się na końcu. Liczba nie może być liczbą ujemną.

Możesz użyć słowa kluczowego infinite, które spowoduje zapętlenie animacji. W ten sposób działa demonstracja „Pulner” od początku tej lekcji.

animation-direction

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

.my-element {
    animation-direction: reverse;
}

Możesz ustawić kierunek, w którym oś czasu biegnie nad klatkami kluczowymi, korzystając z funkcji animation-direction:

• normal: wartość domyślna, czyli przekazywanie dalej.
• reverse: biegnie wstecz na osi czasu.
• alternate: w przypadku każdego wystąpienia animacji oś czasu biegnie do przodu lub do tyłu w sekwencji.
• alternate-reverse: odwrotność do alternate.

animation-delay

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

.my-element {
    animation-delay: 5s;
}

Właściwość animation-delay określa czas oczekiwania przed uruchomieniem animacji. Podobnie jak we właściwości animation-duration, w tym polu można podać wartość czasu.

W odróżnieniu od właściwości animation-duration możesz ją zdefiniować jako wartość ujemną. Jeśli ustawisz wartość ujemną, oś czasu w @keyframes zacznie się od tego punktu. Jeśli np. animacja trwa 10 sekund i ustawisz w polu animation-delay wartość -5s, zacznie się ona od połowy osi czasu.

animation-play-state

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

.my-element:hover {
    animation-play-state: paused;
}

Właściwość animation-play-state umożliwia odtwarzanie i wstrzymywanie animacji. Wartością domyślną jest running. Jeśli ustawisz ją na paused, wstrzymasz animację.

animation-fill-mode

Obsługa przeglądarek

• 43
• 12
• 16
• 9

Źródło

Właściwość animation-fill-mode określa, które wartości na osi czasu @keyframes utrzymują się przed rozpoczęciem animacji lub po jej zakończeniu. Wartością domyślną jest none, co oznacza, że po zakończeniu animacji wartości na osi czasu są odrzucane. Pozostałe opcje to:

• forwards: ostatnia klatka kluczowa zostanie zachowana w zależności od kierunku animacji.
• backwards: pierwsza klatka kluczowa zostanie zachowana w zależności od kierunku animacji.
• both: przestrzega reguł forwards i backwards.

animation – skrót

Zamiast definiować wszystkie właściwości oddzielnie, możesz zdefiniować je za pomocą skrótu animation, który umożliwia definiowanie właściwości animacji w tej kolejności:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

O czym warto pamiętać w przypadku pracy z animacją

Użytkownicy mogą określić w swoim systemie operacyjnym, że wolą ograniczać ruch podczas interakcji z aplikacjami i witrynami. Preferencję można wykryć za pomocą zapytania o media prefers-reduced-motion.

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Niekoniecznie oznacza to brak animacji, a jedynie ograniczenie liczby animacji, zwłaszcza tych nieoczekiwanych. Więcej informacji o tym preferencji i ogólnej skuteczności znajdziesz w tym przewodniku po animacji.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat animacji

W nazwie lub identyfikatorze niestandardowym animacji @keyframes wielkość liter ma znaczenie?

Prawda

🎉

Fałsz

CSS nie zezwala na 2 animacje o tej samej nazwie, ale umożliwia jednoczesne stosowanie elementów SWOOP i swoop.

Słowa kluczowe from oraz to są takie same jak

end i start.

Spróbuj jeszcze raz.

100% i 0%.

Wartość from jest taka sama jak 0%, a to to 100%.

0 i 1

Spróbuj jeszcze raz.

animation-timing-function jest też powszechnie znany jako

Dynamiczny czas

Spróbuj jeszcze raz.

Opóźnienie

Spróbuj jeszcze raz.

Złagodzenie

🎉

Jaka jest minimalna liczba klatek kluczowych wymagana w animacji @keyframes?

1

Przeglądarka przyjmie bieżący stan elementu jako klatkę kluczową, więc wymagana jest co najmniej 1 klatka kluczowa.

2

Spróbuj jeszcze raz.

3

Spróbuj jeszcze raz.

4

Spróbuj jeszcze raz.