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.

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.

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.

@keyframes

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;
  }
}

Właściwości animation

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

.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

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;
}

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.

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.

animation-iteration-count

.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ą.

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

animation-direction

.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.

animation-delay

.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.

animation-play-state

.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.

animation-fill-mode

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.

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.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o animacjach