Ako vytvorím vlastnú krivku prechodu cubic-bezier pre CSS?

Potiahnite dva ovládacie body na grafe, zadajte presné hodnoty x1, y1, x2, y2 alebo vyberte predvoľbu. Potom vyberte CSS pod Výstupný formát a kliknite na Kopírovať, aby ste získali hodnotu cubic-bezier() pre transition-timing-function.

Ako vytvorím efekt odskoku alebo prekmitu pomocou cubic-bezier?

Potiahnite ovládací bod nad alebo pod rámček tak, aby jeho hodnota Y presiahla 0-1. Y môže prekročiť tento rozsah, zatiaľ čo X zostáva medzi 0 a 1. Predvoľby back-out a anticipate sú hotové východiskové body pre prekmit.

Môžem získať prechod pre Tailwind, Framer Motion alebo anime.js?

Áno. Karty výstupného formátu sú CSS, Tailwind, Framer Motion a anime.js. Všetky formátujú rovnaké štyri čísla, takže vyberte kartu a kliknite na Kopírovať, aby ste úryvok vložili do schránky.

Ako načítam existujúcu hodnotu cubic-bezier na úpravu?

Vložte hodnotu, napríklad cubic-bezier(.17, .67, .83, .67), do poľa pre import a kliknite na Načítať. Ak sa nepodarí prečítať štyri čísla, zobrazí sa chybové hlásenie. Krivka je tiež uložená v URL adrese stránky za znakom hash, takže ju možno zdieľať.

Prečo je náhľad pomalší ako moje skutočné prechody?

Náhľad pohybu používa nastavenie Trvanie, ktoré môžete zmeniť, a predvolené hodnoty sú pomalšie, aby ste si mohli krivku preštudovať. Skráťte Trvanie a potom použite Prehrať znova, aby ste videli pohyb rýchlosťou, s akou ho plánujete nasadiť.

Je to naozaj zadarmo?

Áno. Každý nástroj je zadarmo, bez účtu a bez kreditnej karty. Práca prebieha vo vašom zariadení, nie na našich serveroch, vďaka čomu je jej prevádzka bezplatná.

Funguje to na mobile?

Áno. Funguje v aktuálnych mobilných prehliadačoch na iOS a Androide, bez inštalácie.

📈

Generátor CSS Cubic-Bezier prechodu zadarmo

Navrhujte CSS krivky prechodu ťahaním kontrolných bodov, prezerajte pohyb naživo a kopírujte hodnotu cubic-bezier(). Zahŕňa prednastavenia presahu/odskoku.

Beží vo vašom prehliadačiBez registrácie, bez vyskakovacích okienPrihlásenie nie je potrebnéZadarmo navždy

Po načítaní funguje offline

Potiahnite tyrkysové a ružové body na tvarovanie krivky

Kontrolné body

x1y1x2y2

Náhľad pohybu

Trvanie1,6 s

Prechod šírky

Hodnota CSS

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

Predvolby

Ružové a tyrkysové body môžu presahovať nad alebo pod rámček (Y mimo 0–1) na vytvorenie efektov ‚prekmitu' / odskoku ako back-out a anticipate. X zostáva v rozsahu 0–1 (čas sa nedá zvrátiť).

Bežné použitia

Vlastný CSS prechodný easingNávrhom prírodného pocitu easing pre efekty plávania, ponuky a UI prechody.
Animácie odskokov a prekročeniaVytvorte veselý prameň / skok pohyb ťahaním kontrolných bodov mimo kváder.
Easing pre @keyframes animácieVyberte správnu funkciu animácie na čas pre CSS keyframe animácie.
Easing hodnoty pre JS animačné knižniceZískajte kubické bezierove hodnoty pre GSAP, Framer Motion, anime.js a ďalšie.
Pochopte, ako easing fungujeVidieť vzťah medzi bezierova krivka a pohyb, ktorý produkuje.

Ako to funguje

Editor je postavený celý v prehliadači pomocou React stavu a SVG — matematiku krivky nespracúva žiadna knižnica. Dva presúvateľné kontrolné body definujú SVG kubickú Bezierovu krivku a vlastný CSS animačný engine prehliadača spúšťa náhľad pohybu vložením výslednej hodnoty cubic-bezier() priamo do pravidla @keyframes.

1
Presúvajte alebo píšte kontrolné body
Dva úchyty (P1 v tyrkysovej, P2 v ružovej) sedia na SVG plátne. Presúvanie používa Pointer Events API so setPointerCapture, takže úchyt sleduje váš prst alebo kurzor aj mimo hranice SVG. Úchyty môžete tiež posúvať šípkami alebo zadať presné hodnoty do číselných vstupov x1/y1/x2/y2.
2
SVG kreslí krivku v reálnom čase
Krivka je jediný SVG element <path>, ktorého príkaz C (kubická Bezierova krivka) sa pri každej aktualizácii stavu prepočíta zo štyroch súradníc kontrolných bodov. Bez canvasu, bez externej knižnice — SVG renderer prehliadača kreslí cestu priamo.
3
CSS engine prehliadača zobrazuje náhľad zjemnenia
Tri živé animácie (posúvajúci sa bodka, prechod šírky a mierka) spúšťajú CSS @keyframes s hodnotou cubic-bezier() vloženou inline. Vlastný animačný engine prehliadača interpretuje krivku, takže to, čo vidíte, je presne to, čo vytvorí vaše produkčné CSS.
4
Skopírujte úryvok v syntaxi vášho frameworku
Karty formátujú tie isté štyri čísla ako CSS transition-timing-function, Tailwind triedu s ľubovoľnou hodnotou, pole zjemnenia Framer Motion alebo reťazec zjemnenia anime.js. Úryvok sa zapíše do schránky pomocou navigator.clipboard. Krivka je tiež zakódovaná v hash URL (#b=x1,y1,x2,y2), takže ju môžete zdieľať alebo uložiť medzi záložky.