Animacja to świetny sposób na wyróżnienie interaktywnych elementów i dodanie zabawy do projektów. W tym module dowiesz się, jak dodawać efekty animacji i nimi zarządzać za pomocą CSS.
Czasami mali pomocnicy w interfejsach podają przydatne informacje o sekcji, w której się znajdują po kliknięciu. Często mają pulsującą animację, która subtelnie sygnalizuje, że informacje tam są, a z którymi trzeba wejść w interakcję. W tym module dowiesz się, jak tworzyć takie animacje i inne animacje za pomocą CSS.
Za pomocą CSS możesz ustawić sekwencję animacji z klatkami kluczowymi. Sekwencje te mogą być zarówno podstawowe, jak i jednostanowe animacje, a także złożone sekwencje oparte na czasie.
Czym jest klatka kluczowa?
W większości narzędzi do animacji klatki kluczowe służą do przypisywania stanów animacji do sygnatur czasowych na osi czasu.
Oto przykładowa oś czasu dla pulsującej kropki „pomocniczej”. Animacja trwa 1 sekundę i ma 2 stany.
Każdy z tych stanów animacji ma swój początek i koniec w pewnym punkcie. Mapujesz je na osi czasu z klatkami kluczowymi.
@keyframes
Kody CSS @keyframes
działają 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);
}
}
Pierwsza ważna część to identyfikator niestandardowy (custom-ident
), czyli nazwa reguły klatek kluczowych. Identyfikator w tym przykładzie to my-animation
.
Działa on jak nazwa funkcji, umożliwiając odwołanie do reguły klatek kluczowych w innym miejscu kodu CSS.
Wewnątrz reguły klatek kluczowych from
i to
to słowa kluczowe reprezentujące 0%
i 100%
, które stanowią początek i koniec animacji.
Możesz odtworzyć taką regułę:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
W danym okresie możesz dodać dowolną liczbę pozycji. W przykładzie pulsującej pamięci pomocniczej widać 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 w każdej z tych klatek.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
Właściwości animation
Aby użyć elementu @keyframes
w regule CSS, możesz pojedynczo zdefiniować różne właściwości animacji lub skorzystać ze skrótu właściwości animation
.
animation-duration
.my-element {
animation-duration: 10s;
}
Właściwość animation-duration określa, jak długo oś czasu @keyframes
powinna być wartością czasu.
Domyślna wartość to 0 sekund, co oznacza, że animacja jest nadal wyświetlana, ale nie będzie widoczna. Nie możesz używać ujemnych wartości czasu.
animation-timing-function
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, przez co animacja porusza się ze zmienną szybkością w ciągu animation-duration
czasu i sprawia, że element wydaje się odbijać, gdy przeglądarka obliczy wartość wykraczającą poza wartość określoną w parametrze @keyframes
.
W kodzie CSS jest kilka słów kluczowych dostępnych w postaci gotowych ustawień, które służą jako wartości właściwości 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 wydają się krzywe, ponieważ wygładzanie jest obliczane za pomocą krzywej Beziera, czyli typu funkcji służącej do modelowania prędkości. Każde słowo kluczowe w funkcji czasu, np. ease
, odwołuje się do wstępnie zdefiniowanej krzywej Béziera. W CSS możesz zdefiniować krzywą Béziera bezpośrednio 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 rysują każdą część krzywej wzdłuż osi X i Y.
Interpretowanie krzywych Béziera jest skomplikowane. Narzędzia wizualne, takie jak generator autorstwa Lea Verou, są bardzo przydatne.
Funkcja wygładzania steps
Czasami możesz chcieć dokładniej kontrolować animację, przesuwając się w interwałach, a nie wzdłuż krzywej. Funkcja wygładzania steps()
umożliwia podział osi 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 liczba klatek kluczowych jest taka sama jak liczba kroków, każda klatka kluczowa jest odtwarzana w sekwencji przez cały czas trwania danego kroku, bez przejść między stanami. Jeśli jest ich mniej niż kroków, przeglądarka dodaje kroki między klatkami kluczowymi w zależności od drugiego argumentu.
Drugi argument to kierunek. Jeśli ustawiona jest wartość end
, co oznacza, że czynności zakończą się na końcu osi czasu. Jeśli ustawiona jest wartość start
, pierwszy krok animacji kończy się natychmiast po rozpoczęciu, co oznacza, że kończy się o krok wcześniej niż end
.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
Właściwość animation-iteration-count określa, ile razy oś czasu @keyframes
powinna trwać w trakcie animacji. Domyślna wartość to 1, co oznacza, że animacja zatrzymuje się, gdy dotrze do końca osi czasu. Ta wartość nie może być liczbą ujemną.
Aby utworzyć pętlę animacji, ustaw liczbę iteracji na infinite
. Tak działa pulsująca animacja od początku tej lekcji.
animation-direction
.my-element {
animation-direction: reverse;
}
Możesz ustawić kierunek, w którym oś czasu biegnie nad klatkami kluczowymi, za pomocą parametru animation-direction, który przyjmuje te wartości:
normal
: wartość domyślna, która stanowi przekierowanie.reverse
: biegnie wstecz na osi czasu.alternate
: w przypadku każdego wystąpienia animacji oś czasu przełącza się między biegiem do przodu i do tyłu.alternate-reverse
: tak jakalternate
, ale animacja rozpoczyna się z tyłem osi czasu.
animation-delay
.my-element {
animation-delay: 5s;
}
Właściwość animation-delay określa, jak długo przeglądarka oczekuje przed rozpoczęciem animacji.
Podobnie jak w przypadku właściwości animation-duration
, wymaga to czasu.
W przeciwieństwie do animation-duration
możesz zdefiniować animation-delay
jako wartość ujemną, dzięki czemu animacja zaczyna się w odpowiednim punkcie na osi czasu. Jeśli np. Twoja animacja trwa 10 sekund i ustawisz animation-delay
na -5s
, animacja zacznie się od połowy osi czasu.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
Właściwość animation-play-state pozwala odtwarzać i wstrzymywać animację.
Wartością domyślną jest running
. Jeśli ustawisz wartość paused
, animacja zostanie wstrzymana.
animation-fill-mode
Właściwość animation-fill-mode określa, które wartości na osi czasu @keyframes
są zapamiętywane 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.
Inne opcje:
forwards
: ostatnia klatka kluczowa utrzymuje się nadal zależnie od kierunku animacji.backwards
: pierwsza klatka kluczowa nadal wyświetla się w zależności od kierunku animacji.both
: zostanie zachowana zarówno pierwsza, jak i ostatnia klatka kluczowa.
animation
– skrót
Zamiast definiować każdą właściwość oddzielnie, możesz zdefiniować je za pomocą skrótu animation
, który pozwala definiować właściwości animacji w tej 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ć w przypadku pracy z animacją
Użytkownicy mogą tak skonfigurować system operacyjny, by podczas interakcji z aplikacjami i stronami internetowymi preferować zmniejszony ruch. Możesz to wykryć, używając zapytania o multimedia prefers-reduced-motion:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Nie musi to oznaczać braku animacji. Mniej animacji, zwłaszcza tych niespodziewanych, Więcej informacji o tym preferencie i ogólnej skuteczności znajdziesz w naszym przewodniku po animacji.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat animacji
Czy w nazwie lub identyfikatorze niestandardowym animacji @keyframes
rozróżniana jest wielkość liter?
SWOOP
i swoop
.Słowa kluczowe from
i to
są takie same jak:
end
i start
.100%
i 0%
.from
jest taki sam jak 0%
, a to
jest równy 100%.0
i 1
animation-timing-function
jest również powszechnie znany jako:
Jaka jest minimalna liczba klatek kluczowych wymaganych w animacji @keyframes
?