Jak vytvořím vlastní kubickou Bézierovu křivku pro CSS?

Táhněte dvěma úchyty řídicích bodů na grafu, zadejte přesné hodnoty x1, y1, x2, y2 nebo vyberte předvolbu. Poté zvolte CSS ve Výstupní formát a klikněte na Kopírovat pro získání hodnoty cubic-bezier() pro transition-timing-function.

Jak vytvořím efekt odrazu nebo překmitu pomocí cubic-bezier?

Táhněte úchyt nad nebo pod rámeček tak, aby jeho hodnota Y přesáhla 0–1. Y může tento rozsah překročit, zatímco X zůstává mezi 0 a 1. Předvolby zpět-ven a anticipate jsou hotové výchozí body s překmitem.

Mohu získat křivku pro Tailwind, Framer Motion nebo anime.js?

Ano. Karty výstupního formátu jsou CSS, Tailwind, Framer Motion a anime.js. Všechny formátují stejná čtyři čísla, takže vyberte kartu a klikněte na Kopírovat pro vložení úryvku do schránky.

Jak načtu existující hodnotu cubic-bezier k úpravě?

Vložte hodnotu jako cubic-bezier(.17, .67, .83, .67) do pole pro import a klikněte na Načíst. Pokud nelze přečíst čtyři čísla, zobrazí se chybová zpráva. Křivka je také uložena v URL stránky za křížkem, takže ji lze sdílet.

Proč je náhled pomalejší než moje skutečné přechody?

Náhled pohybu používá nastavení Trvání, které můžete změnit, a výchozí hodnoty jsou pomalejší, abyste mohli křivku studovat. Zkraťte Trvání a poté použijte Přehrát znovu pro zobrazení pohybu rychlostí, se kterou plánujete nasadit.

Je to opravdu zdarma?

Ano. Každý nástroj je zdarma, bez účtu a bez platební karty. Práce probíhá na vašem zařízení, nikoli na našich serverech, což umožňuje jeho bezplatné používání.

Funguje to na mobilu?

Ano. Funguje v aktuálních mobilních prohlížečích na iOS a Androidu a nic se neinstaluje.

📈

Generátor CSS kubické Bézierovy křivky zdarma

Navrhujte CSS křivky zpomalení přetažením kontrolních bodů, živě prohlížejte pohyb a kopírujte hodnotu cubic-bezier(). Zahrnuje přednastavení pro přestřelení a odraz.

Běží ve vašem prohlížečiBez registrace, bez vyskakovacích okenNení nutné přihlášeníZdarma navždy

Funguje offline po načtení

Přetažením zelených a růžových úchytů tvarujte křivku

Kontrolní body

x1y1x2y2

Náhled pohybu

Trvání1,6 s

Přechod šířky

Hodnota CSS

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

Předvolby

Růžové a zelené úchyty mohou přesáhnout nad nebo pod rámeček (Y mimo 0–1) pro vytvoření efektů přestřelení / odskoku jako back-out a anticipate. X zůstává v rozsahu 0–1 (čas se nedá vrátit).

Běžná použití

Vlastní zmírnění přechodu CSSNavrhujte přirozené zmírnění efektů pro hover, menu a přechody uživatelského rozhraní.
Animace skákání a překročeníVytvořte zábavný pohyb pružiny/skoku tažením kontrolních bodů za rámec.
Zmírnění pro animace @keyframesVyberte správnou funkci animation-timing-function pro animace CSS keyframe.
Zmírňující hodnoty pro knihovny animací JSZískejte hodnoty cubic-bezier pro GSAP, Framer Motion, anime.js a další.
Pochopit, jak funguje zmírněníPodívejte se na vztah mezi bezierovou křivkou a pohybem, který vytváří.

Jak to funguje

Editor je postaven zcela v prohlížeči pomocí stavu React a SVG — matematiku křivky neřeší žádná knihovna. Dva přetahovatelné řídicí body definují cestu SVG kubické Bézierovy křivky a vlastní CSS animační engine prohlížeče spouští náhled pohybu vložením výsledné hodnoty cubic-bezier() přímo do pravidla @keyframes.

1
Přetáhněte nebo zadejte řídicí body
Dva úchyty (P1 zelenomodrý, P2 růžový) sedí na plátně SVG. Přetahování používá Pointer Events API se setPointerCapture, takže úchyt sleduje váš prst nebo kurzor i mimo hranici SVG. Úchyty lze také posouvat šipkami nebo zadat přesné hodnoty do číselných polí x1/y1/x2/y2.
2
SVG kreslí křivku v reálném čase
Křivka je jediný prvek SVG <path>, jehož příkaz C (kubická Bézierova křivka) se přepočítává ze čtyř souřadnic řídicích bodů při každé aktualizaci stavu. Bez plátna, bez externí knihovny — SVG vykreslovač prohlížeče kreslí cestu přímo.
3
CSS engine prohlížeče zobrazuje náhled zpomalení
Tři živé animace (posouvající se bod, přechod šířky a měřítko) spouštějí CSS @keyframes s hodnotou cubic-bezier() vloženou přímo. Vlastní animační engine prohlížeče interpretuje křivku, takže co vidíte, je přesně to, co vytvoří vaše produkční CSS.
4
Zkopírujte úryvek v syntaxi svého frameworku
Karty formátují stejná čtyři čísla jako CSS transition-timing-function, třídu Tailwind s libovolnou hodnotou, pole ease Framer Motion nebo řetězec zpomalení anime.js. Úryvek se zapisuje do schránky pomocí navigator.clipboard. Křivka se také kóduje do hashe URL (#b=x1,y1,x2,y2), takže ji můžete uložit do záložek nebo sdílet.