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 animacji pulsera w czasie 1 sekundy
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.

Ten sam diagram co wcześniej, ale tym razem z klatkami kluczowymi.
Pulsująca animacja z klatkami kluczowymi.

@keyframes

Obsługa przeglądarek

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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.

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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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.

Krzywa Béziera na wykresie postępu w czasie
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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 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

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

start i end.
0% i 100%.
01

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

Opóźnienie
Dynamiczne czasy
Złagodzenie

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

3
4
2
1