Animacje

Podcast CSS – odcinek 022: Animacja

Czasami w interfejsach pojawiają się małe pomoce, które po kliknięciu wyświetlają przydatne informacje o konkretnej sekcji. Często są one animowane, aby delikatnie poinformować Cię o ich obecności i o możliwości interakcji z nimi. Z tego modułu dowiesz się, jak tworzyć te pomocnicze elementy i inne animacje za pomocą CSS.

Za pomocą CSS możesz ustawić sekwencję animacji za pomocą klatek kluczowych. Te sekwencje mogą być podstawowymi animacjami jednostanowymi lub złożonymi sekwencjami czasowymi.

Co to jest klatka kluczowa?

Większość narzędzi do animacji wykorzystuje klatki kluczowe do przypisywania stanów animacji do sygnatur czasowych na osi czasu.

Oto na przykład oś czasu dla pulsującego punktu „pomocnika”. Animacja trwa 1 sekundę i ma 2 stany.

Każde z tych stanów animacji ma określony punkt początkowy i końcowy. Możesz je zmapować na osi czasu za pomocą klatek kluczowych.

@keyframes

Browser Support

• 43
• 12
• 16
• 9

Source

CSS @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), czyli nazwa reguły keyframe. Identyfikator w tym przykładzie to my-animation. Identyfikator niestandardowy działa jak nazwa funkcji, dzięki czemu możesz odwoływać się do reguły keyframes w innych miejscach w kodzie CSS.

Uwaga: <custom-ident> jest używany w różnych miejscach w usłudze porównywania cen, aby umożliwić Ci nadawanie własnych nazw elementom. W przypadku tych identyfikatorów wielkość liter ma znaczenie, a w niektórych przypadkach są też słowa, których nie można używać. Na przykład przy nadawaniu nazw liniom w CSS Grid nie możesz użyć słowa span.

W regułach klatki kluczowej from i to to słowa kluczowe, które reprezentują 0% i 100%, czyli początek i koniec animacji. Możesz ponownie utworzyć tę samą regułę w ten sposób:

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

W tym czasie możesz dodać dowolną liczbę pozycji. W przykładzie pomocnika pulsowania występują 2 stany, które odpowiadają 2 kluczowym klatkom. Oznacza to, że w ramach reguły klatek kluczowych masz 2 pozycje, które reprezentują zmiany w każdej z tych klatek.

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

animation usługi

Browser Support

• 43
• 12
• 16
• 9

Source

Aby użyć @keyframes w regułach CSS, możesz zdefiniować różne właściwości animacji osobno lub użyć właściwości skrótu animation.

animation-duration

Browser Support

• 43
• 12
• 16
• 9

Source

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

Właściwość animation-duration określa, jak długo ma być @keyframes linia czasu pod względem wartości czasowej. Domyślnie wynosi 0 sekund, co oznacza, że animacja nadal działa, ale jest zbyt szybka, aby ją zobaczyć. Nie możesz używać ujemnych wartości czasu.

animation-timing-function

Browser Support

• 43
• 12
• 16
• 9

Source

Aby odtworzyć naturalny ruch w animacji, możesz użyć funkcji czasowych, które obliczają prędkość animacji w każdym punkcie. Obliczone wartości są często zaokrąglone, co powoduje, że animacja jest odtwarzana z zmienną prędkością w ciągu animation-duration, a element wydaje się odbijać, jeśli przeglądarka oblicza wartość poza wartościami zdefiniowanymi w @keyframes.

W CSS dostępnych jest kilka słów kluczowych, które są używane jako wartość atrybutu 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ą jak krzywe, ponieważ wygładzanie jest obliczane za pomocą krzywej Béziera, czyli typu funkcji używanej do modelowania prędkości. Każde z kluczowych słów funkcji określających czas, np. ease, odwołuje się do zdefiniowanej wstępnie krzywej Béziera. W CSS krzywą Béziera możesz zdefiniować bezpośrednio za pomocą funkcji cubic-bezier(), która przyjmuje 4 wartości liczbowe: x1, y1, x2, y2.

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

Te wartości wyznaczają poszczególne części krzywej na osi X i Y.

Zrozumienie krzywych Béziera jest skomplikowane. Narzędzia wizualne, takie jak ten generator autorstwa Lea Verou, są bardzo pomocne.

Funkcja wypełnienia steps

Czasami możesz chcieć uzyskać bardziej szczegółową kontrolę nad animacją, przesuwając się w określonych odstępach, a nie wzdłuż krzywej. Funkcja steps() pozwala podzielić oś czasu na określone odcinki o równej długości.

.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 z nich jest odtwarzana sekwencyjnie przez dokładnie tyle czasu, ile trwa dany krok, bez przejścia między stanami. Jeśli klatek kluczowych jest 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 jest ustawiona wartość domyślna end, czynności są wykonywane do końca harmonogramu. Jeśli ustawisz wartość start, pierwszy krok animacji zostanie wykonany od razu po rozpoczęciu, co oznacza, że kończy się on o jeden krok wcześniej niż w przypadku wartości end.

animation-iteration-count

Browser Support

• 43
• 12
• 16
• 9

Source

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

Właściwość animation-iteration-count określa, ile razy @keyframes ma się uruchomić podczas animacji. Domyślnie jest to 1, co oznacza, że animacja zatrzymuje się na końcu osi czasu. Ta wartość nie może być ujemna.

Aby animacja była zapętlona, ustaw liczbę iteracji na infinite. Tak działa pulsująca animacja z początku tej lekcji.

animation-direction

Browser Support

• 43
• 12
• 16
• 9

Source

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

Możesz określić kierunek, w którym oś czasu ma się poruszać po klatkach kluczowych, za pomocą parametru animation-direction, który przyjmuje te wartości:

• normal: wartość domyślna, która jest do przodu.
• reverse: odtwarzanie wsteczne na osi czasu.
• alternate: w przypadku każdej iteracji animacji osi czasu naprzemiennie odtwarzana jest do przodu i do tyłu.
• alternate-reverse: podobnie jak w przypadku alternate, ale animacja rozpoczyna się od odtwarzania osi czasu w odwrotnej kolejności.

animation-delay

Browser Support

• 43
• 12
• 16
• 9

Source

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

Właściwość animation-delay określa, jak długo przeglądarka będzie czekać przed rozpoczęciem animacji. Podobnie jak w przypadku właściwości animation-duration, ta przyjmuje wartość czasową.

W przeciwieństwie do animation-duration możesz zdefiniować animation-delay jako wartość ujemną, co powoduje, że animacja rozpoczyna się w odpowiednim punkcie na osi czasu. Jeśli na przykład animacja trwa 10 sekund, a ustawienie animation-delay to -5s, animacja rozpoczyna się w połowie osi czasu.

animation-play-state

Browser Support

• 43
• 12
• 16
• 9

Source

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

Właściwość 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

Browser Support

• 43
• 12
• 16
• 9

Source

Właściwość animation-fill-mode określa, które wartości na osi czasu @keyframes są zachowywane przed rozpoczęciem animacji lub po jej zakończeniu. Wartość domyślna to none, co oznacza, że po zakończeniu animacji wartości na osi czasu są odrzucane. Inne opcje:

• forwards: ostatnia klatka kluczowa jest zachowana na podstawie kierunku animacji.
• backwards: pierwsza klatka kluczowa jest zachowana na podstawie kierunku animacji.
• both: zarówno pierwsza, jak i ostatnia klatka kluczowa pozostają.

Skrót animation

Zamiast definiować każdą właściwość osobno, możesz je zdefiniować za pomocą skrótu animation, który umożliwia definiowanie właściwości animacji w takim porządku:

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

Wskazówki dotyczące pracy z animacją

Użytkownicy mogą skonfigurować system operacyjny tak, aby preferował ograniczone ruchy podczas korzystania z aplikacji i witryn. Możesz wykryć tę preferencję za pomocą zapytania o media prefers-reduced-motion:

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

Niekoniecznie oznacza to, że nie ma animacji. Jest to preferencja dotycząca mniejszej ilości animacji, zwłaszcza nieoczekiwanych animacji. Więcej informacji o tej opcji i ogólnej wydajności znajdziesz w przewodniku po animacjach.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o animacjach

Czy nazwa lub identyfikator niestandardowy animacji @keyframes jest wielkości liter?

Tak

🎉

Nie

CSS nie zezwala na to, aby 2 animacji miały tę samą nazwę, ale pozwala 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 wartość to jest taka sama jak 100%.

0 i 1

Spróbuj jeszcze raz.

animation-timing-function jest też powszechnie znany jako:

Dynamiczne ustalanie czasu

Spróbuj jeszcze raz.

Opóźnienie

Spróbuj jeszcze raz.

Złagodzenie

🎉

Ile kluczowych klatek musi zawierać animacja @keyframes?

1

Przeglądarka przyjmie bieżący stan elementu jako klatkę kluczową, więc wymagana jest co najmniej 1 taka klatka.

2

Spróbuj jeszcze raz.

3

Spróbuj jeszcze raz.

4

Spróbuj jeszcze raz.