Kurs HTML

17.3. Właściwość animation-timing-function

Strona główna > Kurs CSS > Rozdział 17: Animacje CSS (@keyframes) > Właściwość animation-timing-function

Do czego służy animation-timing-function?

Podobnie jak w przypadku przejść (transitions), właściwość animation-timing-function określa **krzywą przyspieszenia animacji**, czyli jak zmienia się jej prędkość w trakcie jednego cyklu trwania (animation-duration).

Pozwala to na nadanie animacjom bardziej naturalnego lub stylizowanego charakteru, zamiast prostego, liniowego ruchu.

Składnia i wartości

Właściwość animation-timing-function przyjmuje te same wartości co transition-timing-function:

animation-timing-function: <timing-function> [, <timing-function>]*;

Gdzie <timing-function> może być jednym z:

  • Predefiniowane słowa kluczowe:
    • ease (wartość domyślna): Wolny start, przyspieszenie, wolny koniec.
    • linear: Stała prędkość.
    • ease-in: Wolny start, przyspieszenie do końca.
    • ease-out: Szybki start, zwolnienie na końcu.
    • ease-in-out: Wolny start, przyspieszenie, wolny koniec (symetryczne).
  • Funkcja cubic-bezier(p1x, p1y, p2x, p2y): Pozwala zdefiniować własną krzywą Béziera za pomocą dwóch punktów kontrolnych (P1, P2). Wartości x muszą być w zakresie [0, 1], wartości y mogą być dowolne.
  • Funkcja steps(liczba_kroków, [kierunek]): Dzieli animację na dyskretne kroki. Kierunek (jump-start, jump-end, jump-none, jump-both) określa, kiedy następuje zmiana wartości w obrębie kroku.

Przykład:

@keyframes ruch {
  to { transform: translateX(200px); }
}

.element1 {
  animation-name: ruch;
  animation-duration: 2s;
  /* Użyj domyślnej funkcji ease */
  animation-timing-function: ease; 
}

.element2 {
  animation-name: ruch;
  animation-duration: 2s;
  /* Animacja ze stałą prędkością */
  animation-timing-function: linear;
}

.element3 {
  animation-name: ruch;
  animation-duration: 2s;
  /* Niestandardowa krzywa - np. efekt "odbicia" */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.element4 {
  animation-name: ruch;
  animation-duration: 2s;
  /* Animacja w 5 krokach */
  animation-timing-function: steps(5, end);
}

.element5 {
  /* Wiele animacji z różnymi funkcjami czasowymi */
  animation-name: animacja1, animacja2;
  animation-duration: 1s, 3s;
  animation-timing-function: ease-in, linear;
}

Jeśli lista funkcji czasowych jest krótsza niż lista nazw animacji, wartości są powtarzane.

Wizualizacja funkcji czasowych

Zrozumienie działania różnych funkcji czasowych ułatwia ich wizualizacja. Narzędzia deweloperskie przeglądarek często oferują edytory krzywych Béziera i podgląd działania funkcji steps(). Istnieją również strony internetowe, takie jak easings.net czy cubic-bezier.com, które demonstrują różne krzywe i pozwalają na ich tworzenie.

Wybór odpowiedniej funkcji czasowej ma kluczowe znaczenie dla estetyki i odczuć płynących z animacji. Warto eksperymentować, aby uzyskać pożądany efekt.

FAQ - Najczęściej zadawane pytania

Jaka jest różnica między ease a ease-in-out?

Obie funkcje zapewniają wolny start i wolny koniec, ale ease ma nieco szybsze przyspieszenie na początku i dłuższe zwolnienie na końcu, podczas gdy ease-in-out jest bardziej symetryczne. W praktyce różnica jest subtelna, ale ease jest często postrzegane jako bardziej naturalne dla typowych interakcji UI.

Do czego przydaje się steps() w animacjach CSS?

steps() jest idealne do tworzenia animacji poklatkowych (np. symulowanie ruchu postaci z arkusza sprite'ów), animacji wskaźników ładowania składających się z dyskretnych stanów, lub efektów pisania na maszynie, gdzie litery pojawiają się skokowo.

Czy mogę użyć różnych funkcji czasowych dla różnych klatek kluczowych w @keyframes?

Nie, właściwość animation-timing-function stosuje się do **całego cyklu animacji**, definiując przejście *między* kolejnymi klatkami kluczowymi. Nie można zdefiniować innej funkcji czasowej dla przejścia z 0% do 50%, a innej dla przejścia z 50% do 100% za pomocą tej jednej właściwości.

Czy animation-timing-function wpływa na wydajność?

Sama funkcja czasowa ma znikomy wpływ na wydajność. Kluczowe dla wydajności jest to, *jakie* właściwości są animowane (transform i opacity są najszybsze). Złożoność obliczeń dla różnych funkcji czasowych jest dla przeglądarki pomijalna.