Edytor Krzywych Cubic-Bezier — Animacje CSS

Edytor Krzywych Cubic-Bezier — Twórz Płynne Krzywe Animacji CSS

Zaprojektuj idealną krzywą przyspieszenia dla swoich animacji i przejść CSS. Przeciągaj dwa punkty kontrolne, aby kształtować krzywą, obserwuj kulkę odtwarzającą ruch w czasie rzeczywistym, wypróbuj klasyczne presety, i skopiuj funkcję czasu cubic-bezier() bezpośrednio do swojego arkusza stylów.

Czym jest krzywa przyspieszenia?

Przyspieszenie (easing) kontroluje, jak animacja przyspiesza i zwalnia w trakcie swojego czasu trwania. Zamiast poruszać się ze stałą prędkością (liniowo), ruch w prawdziwym świecie przyspiesza i zwalnia. CSS wyraża to za pomocą cubic-bezier(x1, y1, x2, y2) — cztery liczby, które definiują krzywą od początku (0,0) do końca (1,1) za pomocą dwóch punktów kontrolnych.

Jak go używać

• Przeciągaj różowe uchwyty: każdy zagina krzywą blisko początku lub końca
• Obserwuj kulkę: podgląd na żywo odtwarza Twoje przyspieszenie w pętli, aby poczuć ruch
• Przekroczenie: przeciągnij uchwyt powyżej lub poniżej pola, aby utworzyć efekty odbicia/antycypacji (wartości poza 0–1)
• Presety: zacznij od ease, linear, ease-in/out lub sprężystego odbicia
• Kopiuj: pobierz gotową wartość cubic-bezier()

Zrozumienie czterech liczb

• x1, y1: pierwszy punkt kontrolny — kształtuje początek animacji
• x2, y2: drugi punkt kontrolny — kształtuje koniec
• Wartości X są zablokowane między 0 a 1 (czas nie cofa się); wartości Y mogą przekraczać ten zakres dla przekroczenia

Wartości Y poza zakresem 0–1 powodują przekroczenie, co tworzy efekt odbicia lub antycypacji.

Gdzie używać wyniku

Wklej wartość do dowolnego przejścia lub animacji CSS, na przykład: transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);. Działa również z animation-timing-function.

Prywatność

To narzędzie działa całkowicie w Twojej przeglądarce. Nic nie jest przesyłane ani przechowywane.