Animacje

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 jak alternate, 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:

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