Generator Cubic-Bezier CSS

To narzędzie pozwala ukształtować własną krzywą płynności CSS cubic-bezier() za pomocą czterech suwaków i zobaczyć ją na żywo przed skopiowaniem kodu. Dostosuj wartości punktów kontrolnych x1, y1, x2 i y2, obserwuj, jak krzywa i poruszający się element podglądu aktualizują się natychmiast, a następnie skopiuj transition-timing-function: cubic-bezier(...) prosto do swojego arkusza stylów.

Czym jest to narzędzie?

cubic-bezier() to funkcja czasowa CSS, która określa, jak animowana lub przechodząca wartość przyspiesza i zwalnia w czasie, zamiast poruszać się ze stałą prędkością. Jest zdefiniowana przez dwa punkty kontrolne — (x1, y1) i (x2, y2) — które wyginają linię między stałym punktem początkowym (0,0) a stałym punktem końcowym (1,1). Wartości x muszą mieścić się między 0 a 1, ale wartości y mogą wykraczać poza ten zakres, tworząc efekty przeskoku lub odbicia.

Ręczne dostrajanie czterech liczb dziesiętnych, aby uzyskać wrażenie, które nie jest ani zbyt gwałtowne, ani zbyt rozmyte, wymaga sporo prób i błędów. To narzędzie zastępuje to zgadywanie bezpośrednią manipulacją: przesuwasz suwak, obserwujesz, jak krzywa się wygina, a piłka podglądu porusza się odpowiednio, i kopiujesz CSS, gdy ruch wydaje się właściwy.

Źródło: CSS Easing Functions Level 1, W3C — specyfikacja definiująca cubic-bezier() oraz pięć nazwanych słów kluczowych, na których oparte są ustawienia predefiniowane tego narzędzia.

Dlaczego warto go używać?

Wykres SVG na żywo pokazuje dokładnie, jak Twoja krzywa wygina się między stałymi punktami początkowym i końcowym, z obydwoma punktami kontrolnymi i ich uchwytami narysowanymi dla przejrzystości.
Przycisk odtwarzania animuje element podglądu na torze, używając Twojej dokładnej krzywej, dzięki czemu poczujesz ruch, a nie tylko zobaczysz statyczny wykres.
Gotowe ustawienia jednym kliknięciem dla pięciu standardowych nazwanych funkcji płynności — ease, ease-in, ease-out, ease-in-out i linear — zgodnie ze specyfikacją CSS Easing Functions.
Wartości y mogą schodzić poniżej 0 lub przekraczać 1, co pozwala tworzyć efekty przeskoku/odbicia, których nazwane słowa kluczowe nie potrafią stworzyć.
Generuje gotowy do wklejenia CSS transition-timing-function — ta sama wartość działa też dla animation-timing-function.
Działa całkowicie w Twojej przeglądarce — nic z tego, co konfigurujesz, nie jest nigdzie przesyłane. Za darmo, bez rejestracji.

Jak używać

Przeciągnij suwaki x1/y1, aby ustawić pierwszy punkt kontrolny, który kształtuje początek animacji.
Przeciągnij suwaki x2/y2, aby ustawić drugi punkt kontrolny, który kształtuje koniec animacji.
Obserwuj czarną krzywą na wykresie — jeśli wybrzusza się powyżej przekątnej na początku, ruch startuje szybko; jeśli pozostaje poniżej, startuje wolno.
Kliknij Odtwórz, aby zobaczyć, jak element podglądu porusza się po torze, używając Twojej krzywej jako transition-timing-function.
Wypróbuj gotowe ustawienie (ease, ease-in, ease-out, ease-in-out, linear) jako punkt wyjścia, a następnie dopracuj suwaki.
Skopiuj wygenerowany CSS i wklej go do reguły transition lub animation.

Przykład

Wejście

x1: 0,25, y1: 0,1, x2: 0,25, y2: 1

Wynik

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

To dokładne punkty kontrolne standardowego słowa kluczowego CSS ease — szybki start, a następnie stopniowe zwalnianie aż do końca.

Dlaczego wartości y mogą wykraczać poza 0–1

W przeciwieństwie do osi x, która reprezentuje czas i musi biec od 0 do 1, oś y reprezentuje postęp animowanej wartości i nie ma takiego ograniczenia. Ustawienie y1 poniżej 0 lub y2 powyżej 1 sprawia, że krzywa zapada się przed wartością początkową lub wystrzeliwuje poza wartość końcową, zanim się ustabilizuje — to podstawa efektów przeskoku i antycypacji używanych przy naciskaniu przycisków, pojawianiu się okien modalnych i zabawnych mikrointerakcjach interfejsu. Żadne z pięciu nazwanych słów kluczowych (ease, ease-in, ease-out, ease-in-out, linear) nie potrafi tego stworzyć — do tego potrzebny jest własny cubic-bezier().

transition-timing-function a animation-timing-function

Wartość cubic-bezier() generowana przez to narzędzie działa identycznie w obu właściwościach. Użyj transition-timing-function, gdy ruch jest wywoływany zmianą stanu (np. hover lub przełączenie klasy), a animation-timing-function w regule animacji sterowanej @keyframes, gdy potrzebujesz tego samego efektu automatycznie lub w pętli.

Popularne wzorce płynności

Zgrabna reakcja interfejsu (przyciski, przełączniki): trzymaj punkty kontrolne blisko przekątnej z lekkim nachyleniem ease-out, np. cubic-bezier(0.4, 0, 0.2, 1).
Standardowa krzywa Material Design: cubic-bezier(0.4, 0, 0.2, 1) — szybki start, łagodne zakończenie, szeroko stosowana w przejściach paneli i kart.
Odbicie/przeskok: podnieś y2 powyżej 1, np. cubic-bezier(0.34, 1.56, 0.64, 1), dla zabawnego efektu pojawienia się.
Antycypacja przed ruchem: obniż y1 poniżej 0, aby element lekko się cofnął przed ruchem do przodu.
Płynne ease-in-out dla animacji w pętli: trzymaj krzywą niemal symetrycznie względem środka.

Łączenie z innymi narzędziami CSS

Krzywa płynności rzadko jest używana samodzielnie — zazwyczaj jest stosowana do elementu, który potrzebuje też cieni, zaokrąglonych rogów lub gradientów. Wygeneruj stylistykę wizualną za pomocą innych narzędzi CSS poniżej, a następnie dodaj funkcję czasową z tego narzędzia do tej samej reguły lub deklaracji transition/animation.

→ Generator cieni ramki · Generator promienia krawędzi

Najczęściej zadawane pytania

Co właściwie oznaczają cztery liczby w cubic-bezier()?

To współrzędne dwóch punktów kontrolnych, (x1, y1) i (x2, y2), które wyginają krzywą Béziera biegnącą od stałego punktu początkowego (0,0) do stałego punktu końcowego (1,1). Oś x reprezentuje upływający czas (od 0 do 1), a oś y reprezentuje, jak bardzo postąpiła animowana właściwość, dlatego x1 i x2 muszą mieścić się w zakresie 0–1, podczas gdy y1 i y2 mogą wykraczać poza ten zakres.

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

ease (domyślna wartość CSS) startuje szybko, a potem łagodnie zwalnia. ease-in zaczyna się wolno i przyspiesza pod koniec, przydatne dla elementów opuszczających ekran. ease-out zaczyna się szybko i zwalnia, przydatne dla elementów wchodzących na ekran. ease-in-out jest wolne na obu końcach i szybsze w środku, dając płynne, symetryczne odczucie.

Czy mogę użyć tej samej wartości cubic-bezier() zarówno dla przejść, jak i animacji?

Tak. transition-timing-function i animation-timing-function akceptują dokładnie tę samą składnię cubic-bezier() i dają tę samą krzywą płynności — jedyna różnica to to, do której funkcji CSS (przejścia czy animacji opartej na keyframes) przypisana jest ta funkcja czasowa.

Dlaczego moja krzywa wygląda dziwnie, gdy y1 lub y2 jest bardzo duże lub ujemne?

To normalne — przesunięcie wartości y daleko poza zakres 0–1 tworzy silny przeskok, w którym animowana wartość znacznie wykracza poza swój cel, zanim się ustabilizuje. To prawidłowy i często celowy efekt, ale jeśli jest niepożądany, przywróć y1 i y2 bliżej zakresu 0–1.

Czy własna krzywa jest lepsza niż zwykłe używanie nazwanych słów kluczowych?

Niekoniecznie — pięć słów kluczowych (ease, ease-in, ease-out, ease-in-out, linear) pokrywa większość codziennych potrzeb i jest łatwiejsze do odczytania w kodzie. Sięgnij po własny cubic-bezier(), gdy potrzebujesz konkretnego odczucia, którego słowa kluczowe nie oferują, np. odbicia, ostrzejszego zatrzaśnięcia lub dopasowania do specyfikacji ruchu konkretnego systemu projektowego.