Animacje

Animacja to świetny sposób na wyróżnianie interaktywnych elementów i wzbudzenie zainteresowania i zapewniają świetną zabawę. W tym module dowiesz się, jak dodawać tagi i kontrolować za pomocą stylów CSS.

Czasami w interfejsach wyświetlają się mali pomocnicy, informacje o sekcji, w której się znajdują po kliknięciu przycisku. Często mają one migającą animację, która delikatnie informuje, że informacje są dostępne; z którym należy wejść w interakcję. W tym module pokazujemy, jak tworzyć takie elementy pomocnicze, a także inne animacje przy użyciu CSS.

Pulsujące ikony to jeden ze sposobów na zapewnienie, pamiętaj o ważnych informacjach.

Za pomocą CSS możesz ustawić sekwencję animacji z klatkami kluczowymi. Te sekwencje mogą być proste, jednostanowe animacje lub złożone sekwencje czasowe.

Co to jest klatka kluczowa?

W większości narzędzi do animacji klatki kluczowe to mechanizm używany do przypisywania animacji. do sygnatur czasowych na osi czasu.

Oto oś czasu dla pulsującego „pomocnika” . Animacja jest odtwarzana trwa 1 sekundę i ma 2 stany.

Stany migającej animacji.

Każdy z tych stanów animacji zaczyna i kończy się w określonym miejscu. Mapujesz je na osi czasu za pomocą klatek kluczowych.

Pulsująca animacja z klatkami kluczowymi.

@keyframes

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

Usługa porównywania cen @keyframes opiera się na tej samej koncepcji co klatki kluczowe animacji.

Oto przykład z 2 stanami:

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

Pierwszą ważną częścią jest identyfikator niestandardowy (custom-ident), nazwę reguły klatek kluczowych. W tym przykładzie identyfikator to my-animation. Identyfikator niestandardowy działa jak nazwa funkcji, dzięki czemu możesz odwoływać się do reguły klatek kluczowych w innym miejscu w kodzie CSS.

Uwaga: atrybut <custom-ident> jest używany w różnych miejscach w CSS, aby umożliwić podawanie swoje imię i nazwisko. W identyfikatorach jest rozróżniana wielkość liter, a w niektórych przypadkach są słowa, których nie można używać. Na przykład podczas nazywania wierszy w CSS Siatka – nie można używać słowa span.

W regule klatek kluczowych słowa kluczowe from i to odpowiadają słowom kluczowym 0% i 100%, który oznacza początek i koniec animacji. Możesz odtworzyć tę samą regułę w następujący sposób:

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

Możesz dodać dowolną liczbę stanowisk w danym przedziale czasu. W pulsującym przykładzie pomocniczym są 2 stany, które przekładają się na 2. klatek kluczowych. Oznacza to, że w regule klatek kluczowych występują 2 pozycje, reprezentują zmiany każdej z tych klatek kluczowych.

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

Spróbuj zmodyfikować regułę pulse, aby sprawdzić, jak animacja zmian.

Właściwości animation

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

Aby użyć atrybutu @keyframes w regule CSS, możesz zdefiniować różne animacje z poszczególnych usług lub użyj funkcji animation skróconą.

animation-duration

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

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

Wartość animation-duration określa długość osi czasu @keyframes jako wartość czasu. Domyślna wartość to 0 sekund, co oznacza, że animacja będzie nadal wyświetlana, ale będzie zbyt aktualna. szybko sprawdzić, co się dzieje. Nie można używać ujemnych wartości czasu.

animation-timing-function

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

Aby odtworzyć naturalny ruch w animacji, możesz użyć funkcji czasu, które oblicza szybkość animacji w każdym punkcie. Obliczone wartości są często wykrzywiona, dzięki czemu animacja będzie wyświetlana ze zmienną prędkością animation-duration, a element wygląda na odbijający się, jeśli przeglądarka oblicza wartość wykraczającą poza wartości zdefiniowane w funkcji @keyframes.

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

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

Spróbuj zmienić funkcję licznika czasu animacji ich zastosowania.

Wartości funkcji wygładzania wyglądają na krzywą, ponieważ wygładzanie jest obliczane za pomocą parametru Krzywa Beziera – typ funkcji używany do modelowania prędkości. Za każdym razem słowa kluczowe funkcji, takie jak ease, odwołują się do wstępnie zdefiniowanej krzywej Béziera. W CSS możesz zdefiniować krzywą Béziera bezpośrednio za pomocą funkcji cubic-bezier(), , który akceptuje 4 wartości liczbowe: x1, y1, x2 oraz y2.

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

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

Przykładowa krzywa Béziera

Zrozumienie krzywych Béziera jest skomplikowane. Narzędzia wizualne, takie jak ten generatora przez Lea Verou.

Funkcja wygładzania steps

Czasami możesz potrzebować bardziej szczegółowej kontroli nad animacją, w odstępach, a nie wzdłuż krzywej. Funkcja wygładzania steps() pozwala podzielić oś czasu na zdefiniowane przedziały o równym czasie trwania.

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

Pierwszy argument to liczba kroków. Jeśli występuje taka sama liczba jako klatek kluczowych, każda klatka kluczowa jest odtwarzana po kolei przez taki czas swojego kroku, bez przejścia między stanami. Jeśli jest mniej klatek kluczowych niż kroków, przeglądarka dodaje kroki pomiędzy klatki kluczowe w zależności od drugiego argumentu.

Drugi argument to kierunek. Jeśli ma wartość end, która jest wartością domyślnie kroki kończą się na końcu osi czasu. Jeśli jest ustawiona na start, pierwszy etap animacji kończy się, gdy tylko się zaczyna, kończy o krok wcześniej niż end.

Porównaj animacje z krokami i bez kroków.

animation-iteration-count

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

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

Wartość animation-iteration-count określa, ile razy oś czasu @keyframes powinna działać w animację. Wartość domyślna to 1, co oznacza, że animacja jest zatrzymywana po osiągnie koniec osi czasu. Ta wartość nie może być liczbą ujemną.

Spróbuj zmienić liczbę iteracji tej animacji.

Aby utworzyć pętlę animacji, ustaw liczbę iteracji na infinite. Jak to zrobić ta animacja będzie migać.

Pulsująca animacja powtarza się w nieskończoność.

animation-direction

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

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

Możesz wybrać kierunek, w którym oś czasu biegnie po klatkach kluczowych animation-direction, , która przyjmuje następujące wartości:

• normal: wartość domyślna, czyli ciąg dalszy.
• reverse: przebiega wstecz na osi czasu.
• alternate: przy każdej iteracji animacji oś czasu przełącza się między biegu do przodu i do tyłu.
• alternate-reverse: tak jak alternate, ale animacja zaczyna się tagiem na osi czasu.

Spróbuj zmienić kierunek animacji.

animation-delay

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

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

Wartość animation-delay określa czas oczekiwania przeglądarki przed rozpoczęciem animacji. Podobnie jak w przypadku właściwości animation-duration, ta wartość wymaga podania wartości czasu.

W przeciwieństwie do metody animation-duration możesz zdefiniować element animation-delay jako wartość ujemną dzięki której animacja zaczyna się w odpowiednim punkcie parametru osi czasu. Jeśli np. animacja trwa 10 sekund i ustawisz Od animation-delay do -5s, animacja zaczyna się od połowy osi czasu.

Spróbuj zmienić opóźnienie animacji.

animation-play-state

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

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

Wartość animation-play-state umożliwia odtwarzanie i wstrzymywanie animacji. Wartością domyślną jest running. Jeśli ustawisz wartość paused, animacja zostanie wstrzymana.

Przytrzymaj kursor na animowanym elemencie, aby do wstrzymania animacji.

animation-fill-mode

Obsługa przeglądarek

• 43,
• 12
• 16
• 9.

Źródło

tryb animation-fill-mode; określa, które wartości na osi czasu @keyframes utrzymują się przed ani po zakończeniu animacji. Wartością domyślną jest none, co oznacza, że Po zakończeniu animacji wartości z osi czasu są usuwane. Inne opcje:

• forwards: ostatnia klatka kluczowa jest wyświetlana w zależności od kierunku animacji.
• backwards: obowiązuje pierwsza klatka kluczowa zależnie od kierunku animacji.
• both: zostaje zachowana zarówno pierwsza, jak i ostatnia klatka kluczowa.

Spróbuj zmienić tryb wypełniania.

animation – skrót

Zamiast definiować każdą właściwość oddzielnie, możesz zdefiniować je w Skrót animation, który pozwala zdefiniować właściwości animacji w tagu w 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ć podczas pracy z animacjami

Użytkownicy mogą tak skonfigurować system operacyjny, aby preferował zmniejszony ruch. podczas interakcji z aplikacjami i witrynami. Możesz wykryć tę preferencję przy użyciu: prefers-reduced-motion zapytanie o media:

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

Nie musi to być preferencja w zakresie braku animacji. Wolę mniej zwłaszcza tych nieoczekiwanych. Więcej informacji na temat: tę preferencję i ogólną skuteczność animacja guide.

Zobacz przykład zmniejszonej animacji.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o animacjach

Czy w nazwie lub identyfikatorze niestandardowym animacji @keyframes rozróżniana jest wielkość liter?

Tak

🎉

Nie

CSS nie zezwala na to, aby 2 animacje miały tę samą nazwę, ale zezwalają na współistnienie SWOOP i swoop.

Słowa kluczowe from i to są takie same jak:

start i end.

Spróbuj jeszcze raz.

0% i 100%.

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

0 i 1

Spróbuj jeszcze raz.

animation-timing-function jest również powszechnie znany jako:

Dynamiczne czasy

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.