Kurs HTML

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

Właściwość transition-timing-function opisuje, **jak zmienia się prędkość przejścia** w czasie jego trwania. Zamiast stałej prędkości (linear), możemy sprawić, że animacja będzie przyspieszać na początku, zwalniać na końcu, lub przebiegać w bardziej złożony sposób. Definiuje ona tzw. **krzywą przyspieszenia** lub **funkcję czasową** przejścia.

Odpowiedni dobór funkcji czasowej może sprawić, że animacje będą wyglądały bardziej naturalnie i dynamicznie.

Predefiniowane funkcje czasowe

CSS oferuje kilka wbudowanych słów kluczowych jako wartości dla transition-timing-function:

• ease (wartość domyślna): Przejście zaczyna się powoli, przyspiesza w środku i zwalnia na końcu. Jest to najczęściej stosowana wartość, dająca naturalny efekt. Odpowiada cubic-bezier(0.25, 0.1, 0.25, 1.0).
• linear: Przejście odbywa się ze stałą prędkością od początku do końca. Odpowiada cubic-bezier(0.0, 0.0, 1.0, 1.0).
• ease-in: Przejście zaczyna się powoli i stopniowo przyspiesza aż do końca. Odpowiada cubic-bezier(0.42, 0, 1.0, 1.0).
• ease-out: Przejście zaczyna się szybko i stopniowo zwalnia pod koniec. Odpowiada cubic-bezier(0, 0, 0.58, 1.0).
• ease-in-out: Przejście zaczyna się powoli, przyspiesza w środku i zwalnia na końcu, podobnie do ease, ale z bardziej symetrycznym przyspieszeniem i zwolnieniem. Odpowiada cubic-bezier(0.42, 0, 0.58, 1.0).

Przykład:

.element1 {
  transition-property: transform;
  transition-duration: 1s;
  /* Użyj domyślnej funkcji ease */
  transition-timing-function: ease; 
}

.element2 {
  transition-property: opacity;
  transition-duration: 0.5s;
  /* Przejście ze stałą prędkością */
  transition-timing-function: linear;
}

.element3 {
  transition-property: width, height;
  transition-duration: 0.8s;
  /* Inna funkcja dla szerokości, inna dla wysokości */
  transition-timing-function: ease-in, ease-out;
}
Kopiuj

Podobnie jak w przypadku transition-duration, jeśli lista funkcji czasowych jest krótsza niż lista właściwości, wartości są powtarzane.

Funkcja cubic-bezier(p1x, p1y, p2x, p2y)

Dla bardziej zaawansowanej kontroli nad krzywą przyspieszenia możemy użyć funkcji cubic-bezier(). Definiuje ona krzywą Béziera trzeciego stopnia za pomocą współrzędnych dwóch punktów kontrolnych (P1 i P2) na wykresie postępu animacji w czasie.

• p1x, p1y: Współrzędne pierwszego punktu kontrolnego.
• p2x, p2y: Współrzędne drugiego punktu kontrolnego.

Wartości x (p1x, p2x) muszą mieścić się w zakresie od 0 do 1. Wartości y (p1y, p2y) mogą wychodzić poza zakres 0-1, co pozwala tworzyć efekty "odbicia" lub "przekroczenia" wartości docelowej przed jej osiągnięciem.

Przykład:

.element {
  transition-property: transform;
  transition-duration: 0.6s;
  /* Niestandardowa krzywa - np. szybki start, powolny koniec */
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Kopiuj

Istnieją narzędzia online (np. cubic-bezier.com), które pozwalają wizualnie tworzyć krzywe Béziera i generować odpowiednie wartości dla funkcji cubic-bezier().

Funkcja steps(liczba_kroków, [kierunek])

Funkcja steps() (lub step-timing-function) pozwala podzielić przejście na określoną liczbę **dyskretnych kroków**, zamiast płynnej animacji. Animacja "przeskakuje" między tymi krokami.

• liczba_kroków: Dodatnia liczba całkowita określająca, na ile kroków ma być podzielone przejście.
• kierunek (opcjonalny): Określa, w którym momencie kroku następuje zmiana wartości:
  • jump-end (lub end, wartość domyślna): Zmiana następuje na końcu każdego kroku.
  • jump-start (lub start): Zmiana następuje na początku każdego kroku.
  • jump-none: Zmiana jest natychmiastowa na początku i na końcu, bez utrzymywania wartości w krokach 0 i n.
  • jump-both: Zmiana jest natychmiastowa na początku i na końcu, z utrzymaniem wartości w krokach 0 i n.

Przykład: Animacja poklatkowa

Funkcja steps() jest często używana do tworzenia animacji poklatkowych (sprite animations), gdzie przesuwamy tło obrazka (sprite sheet) w dyskretnych krokach.

.sprite {
  width: 50px;
  height: 50px;
  background-image: url('sprite.png');
  background-position: 0 0;
  transition-property: background-position;
  transition-duration: 1s;
  /* Podziel animację na 10 kroków, zmiana na końcu kroku */
  transition-timing-function: steps(10, end);
}

.sprite:hover {
  /* Przesuń tło, aby pokazać kolejne klatki */
  background-position: -500px 0; 
}
Kopiuj