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 jakalternate
, 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:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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
Czy w nazwie lub identyfikatorze niestandardowym animacji @keyframes
rozróżniana jest wielkość liter?
Słowa kluczowe from
i to
są takie same jak:
start
i end
.0
i 1
0%
i 100%
.animation-timing-function
jest również powszechnie znany jako:
Jaka jest minimalna liczba klatek kluczowych wymagana w animacji @keyframes
?