Polski
Rysuj własne krzywe easing CSS z podglądem animacji na żywo.
Ostatnia aktualizacja
Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.
*Funkcja easingu* w CSS określa, jak animacja przyspiesza i zwalnia w trakcie trwania. Słowa kluczowe ease, ease-in, ease-out i ease-in-out to skróty do czterech konkretnych krzywych. Do wszystkiego poza nimi CSS daje ci cubic-bezier(): funkcję, która przyjmuje cztery liczby i rysuje własną krzywą.
Te cztery liczby to współrzędne dwóch punktów kontrolnych (x1, y1, x2, y2). Trudno je pisać ręcznie, bo drobne zmiany dają duży efekt wizualny, a małe przestrzelenia tworzą ruch *z odbiciem*, którego nie widać w samych liczbach. Edytor wizualny pozwala przeciągać uchwyty i patrzeć, jak reaguje krzywa. To dużo szybsze niż poprawianie ułamków.
Edytor Coddy rysuje krzywą na bieżąco, animuje kulkę podglądu twoim easingiem i ma presety typowych wzorców: słowa kluczowe CSS, krzywą *standard* z Material Design, wyjście z odbiciem i *anticipate* z przestrzeleniem. Skopiuj gotowy ciąg cubic-bezier() i wklej go do CSS. Wszystko działa w twojej przeglądarce.
linear: równy postęp w każdej jednostce czasu.cubic-bezier(0.4, 0, 0.2, 1): szybki start, wolny koniec. iOS używa czegoś zbliżonego do cubic-bezier(0.42, 0, 0.58, 1) (ease-in-out).Kliknij preset najbliższy efektowi, który chcesz uzyskać. *Material standard* i *Bouncy out* to dobre punkty wyjścia dla ruchu w UI, a *ease-out* to bezpieczny wybór dla animacji wejścia.
Turkusowe uchwyty to dwa punkty kontrolne. Pierwszym ustawiasz, jak animacja *zaczyna się*, drugim, jak się *kończy*. Wyciągnięcie uchwytu ponad górną krawędź daje przestrzelenie.
Ustaw realistyczny czas trwania swojej animacji. Przejścia w UI trwają zwykle 150-300ms, ruchy akcentujące 400-600ms. Kliknij *Odtwórz ponownie*, aby uruchomić podgląd z nowym czasem.
Aby wpisać dokładne wartości, użyj pól X1/Y1/X2/Y2 pod krzywą. Y może zejść poniżej 0 lub przekroczyć 1, X zawsze mieści się w 0..1.
Kliknij *Kopiuj*, aby dostać całą regułę transition. Wklej ją do arkusza stylów i zamień transform na właściwość, którą animujesz.
Popularne easingi i stojące za nimi wartości cubic-bezier. Wszystkie cztery słowa kluczowe poniżej to aliasy konkretnych krzywych cubic-bezier.
| Easing | Wartości cubic-bezier | Kiedy używać |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | Domyślny dla transition: łagodny, ale bez charakteru |
linear | (0, 0, 1, 1) | Stała prędkość: zwykle zła dla UI, dobra dla spinnerów |
ease-in | (0.42, 0, 1, 1) | Wolny start, szybki koniec: najlepszy do wyjść |
ease-out | (0, 0, 0.58, 1) | Szybki start, wolny koniec: najlepszy do wejść i reakcji |
ease-in-out | (0.42, 0, 0.58, 1) | Symetryczny: najlepszy do przełączania tam i z powrotem |
| Material standard | (0.4, 0, 0.2, 1) | Żwawy ruch nowoczesnego UI |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | Przestrzela i wraca: zabawne wejścia |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}Większość uniesienia dzieje się szybko na początku, potem ruch się uspokaja. Przycisk reaguje na kursor żywo, a nie ociężale.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Wartość Y2 równa 1.28 sprawia, że krzywa mija cel, a potem wraca. Używaj z umiarem: ruch z odbiciem szybko męczy, jeśli wszystko porusza się w ten sposób.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Ujemne Y1 oznacza, że animacja na chwilę rusza w *przeciwną* stronę, zanim dotrze do celu. To zapożyczenie z klasycznej animacji: drobna antycypacja sprawia, że główny ruch wygląda na zamierzony.
ease-in w animacjach wejścia. Zaczyna wolno i kończy szybko, czyli odwrotnie niż ruch, który wydaje się responsywny. Użyj ease-out.linear dla ruchu w UI, bo wydaje się neutralny. Ruch ze stałą prędkością wygląda mechanicznie: pasuje do pasków postępu i spinnerów, ale rzadko do czegokolwiek innego.cubic-bezier()?cubic-bezier(x1, y1, x2, y2). Pierwszy punkt kształtuje *początek* animacji, drugi jej *koniec*. X zawsze mieści się między 0 a 1 (czas), a Y może wyjść poza 0..1, aby uzyskać przestrzelenie lub antycypację (postęp).cubic-bezier(0.4, 0, 0.2, 1). Do wyjść pasuje *ease-in*. Unikaj *linear*, chyba że animujesz postęp.ease od ease-out?ease także łagodnie startuje. ease-out rusza z pełną prędkością i zwalnia. Właśnie ten *natychmiastowy* ruch sprawia, że wydaje się bardziej responsywny niż ease.cubic-bezier(0.18, 0.89, 0.32, 1.28) przestrzela o około 28%, zanim się ustabilizuje. Do wielokrotnych odbić potrzebujesz @keyframes albo biblioteki z fizyką sprężyn, bo cubic-bezier może przestrzelić tylko raz.@keyframes?animation-timing-function, w skrócie animation albo dla pojedynczej klatki kluczowej. W złożonym, wieloetapowym ruchu możesz ustawić inny easing między każdą parą klatek kluczowych.