Jak stworzyć niestandardową krzywą wygładzania cubic-bezier dla CSS?

Przeciągnij dwa uchwyty punktów kontrolnych na wykresie, wpisz dokładne wartości x1, y1, x2, y2 lub wybierz ustawienie wstępne. Następnie wybierz CSS w Formacie wyjścia i kliknij Kopiuj, aby uzyskać wartość cubic-bezier() dla transition-timing-function.

Jak uzyskać efekt odbicia lub wychylenia za pomocą cubic-bezier?

Przeciągnij uchwyt powyżej lub poniżej pola, aby jego wartość Y wyszła poza zakres 0-1. Y może przekraczać ten zakres, podczas gdy X pozostaje między 0 a 1. Ustawienia wstępne back-out i anticipate to gotowe punkty wyjścia dla efektu wychylenia.

Czy mogę uzyskać wygładzanie dla Tailwind, Framer Motion lub anime.js?

Tak. Zakładki formatu wyjścia to CSS, Tailwind, Framer Motion i anime.js. Wszystkie formatują te same cztery liczby, więc wybierz zakładkę i kliknij Kopiuj, aby umieścić fragment kodu w schowku.

Jak załadować istniejącą wartość cubic-bezier, aby ją edytować?

Wklej wartość, taką jak cubic-bezier(.17, .67, .83, .67), do pola importu i kliknij Załaduj. Jeśli nie można odczytać czterech liczb, pojawi się komunikat o błędzie. Krzywa jest również przechowywana w adresie URL strony po hashu, więc można ją udostępniać.

Dlaczego podgląd wydaje się wolniejszy niż moje rzeczywiste przejścia?

Podgląd ruchu używa ustawienia Czas trwania, które możesz zmienić, a wartości domyślne są wolniejsze, abyś mógł przestudiować krzywą. Skróć Czas trwania, a następnie użyj Odtwórz ponownie, aby zobaczyć ruch z prędkością, z jaką planujesz go zastosować.

Czy naprawdę jest za darmo?

Tak. Każde narzędzie jest darmowe, bez konta i karty kredytowej. Praca odbywa się na Twoim urządzeniu, a nie na naszych serwerach, co pozwala utrzymać ją za darmo.

Czy działa na urządzeniach mobilnych?

Tak. Działa w aktualnych przeglądarkach mobilnych na iOS i Androidzie, bez instalowania czegokolwiek.

📈

Generator animacji CSS Cubic-Bezier za darmo

Projektuj krzywe łagodzenia CSS, przeciągając punkty kontrolne, podglądaj ruch na żywo i kopiuj wartość cubic-bezier(). Zawiera ustawienia wstępne dla przeskoku i odbicia.

Działa w przeglądarceBez rejestracji, bez wyskakujących okienekLogowanie nie jest wymaganeZa darmo na zawsze

Działa offline po wczytaniu

Przeciągnij niebiesko-zielone i różowe uchwyty, aby ukształtować krzywą

Punkty kontrolne

x1y1x2y2

Podgląd ruchu

Czas trwania1,6 s

Przejście szerokości

Wartość CSS

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

Szablony

Różowe i niebiesko-zielone uchwyty można ciągnąć powyżej lub poniżej ramki (Y poza 0-1), aby tworzyć efekty 'overshoot' / odbicia jak back-out i anticipate. X pozostaje w granicach 0-1 (czas nie może się cofnąć).

Typowe zastosowania

Niestandardowe Wygładzanie Przejść CSSZaprojektuj naturalne wygładzanie dla efektów hover, menu i przejść interfejsu.
Animacje Odbicia i PrzekroczeniaUtwórz zabawny ruch sprężystości/odbicia, przeciągając punkty kontrolne poza pole.
Wygładzanie Animacji @keyframesWybierz odpowiednią animation-timing-function dla animacji CSS keyframe.
Wartości Wygładzania dla Bibliotek Animacji JSUzyskaj wartości cubic-bezier dla GSAP, Framer Motion, anime.js i innych.
Zrozumieć Jak Działa WygładzaniePoczuj związek między krzywą beziera a ruchem, który wytwarza.

Jak to działa

Edytor jest zbudowany w całości w przeglądarce z użyciem stanu React i SVG — żadna biblioteka nie obsługuje matematyki krzywej. Dwa przeciągane punkty kontrolne definiują ścieżkę SVG sześciennej krzywej Béziera, a podgląd ruchu obsługuje własny silnik animacji CSS przeglądarki, do którego wynikowa wartość cubic-bezier() trafia bezpośrednio w regule @keyframes.

1
Przeciągnij lub wpisz punkty kontrolne
Dwa uchwyty (P1 morski, P2 różowy) znajdują się na płótnie SVG. Przeciąganie używa Pointer Events API z setPointerCapture, więc uchwyt podąża za palcem lub kursorem nawet poza granicą SVG. Uchwyty możesz też przesuwać klawiszami strzałek lub wpisać dokładne wartości w pola x1/y1/x2/y2.
2
SVG rysuje krzywą w czasie rzeczywistym
Krzywa to pojedynczy element SVG <path>, którego polecenie C (sześcienna krzywa Béziera) jest przeliczane z czterech współrzędnych punktów kontrolnych przy każdej aktualizacji stanu. Bez canvas i bez zewnętrznej biblioteki — renderer SVG przeglądarki rysuje ścieżkę bezpośrednio.
3
Silnik CSS przeglądarki pokazuje wygładzanie
Trzy animacje na żywo (przesuwająca się kropka, przejście szerokości i skalowanie) uruchamiają CSS @keyframes z wartością cubic-bezier() wstawioną inline. Krzywą interpretuje własny silnik animacji przeglądarki, więc widzisz dokładnie to, co da Twój produkcyjny CSS.
4
Skopiuj fragment w składni swojego frameworka
Karty formatują te same cztery liczby jako CSS transition-timing-function, klasę Tailwind z dowolną wartością, tablicę ease Framer Motion lub ciąg easing anime.js. Fragment jest zapisywany do schowka przez navigator.clipboard. Krzywa jest też kodowana w hashu URL (#b=x1,y1,x2,y2), więc możesz ją udostępnić lub zapisać w zakładkach.