Cum creez o curbă de easing cubic-bezier personalizată pentru CSS?

Trageți cele două mânere ale punctelor de control de pe grafic, introduceți valorile exacte x1, y1, x2, y2 sau alegeți o presetare. Apoi alegeți CSS la Format de ieșire și faceți clic pe Copiază pentru a obține valoarea cubic-bezier() pentru transition-timing-function.

Cum creez un efect de bounce sau overshoot cu cubic-bezier?

Trageți un mâner deasupra sau dedesubtul casetei, astfel încât valoarea sa Y să depășească 0-1. Y poate depăși acel interval, în timp ce X rămâne între 0 și 1. Presetările back-out și anticipate sunt puncte de plecare gata făcute pentru overshoot.

Pot obține easing-ul pentru Tailwind, Framer Motion sau anime.js?

Da. Taburile de format de ieșire sunt CSS, Tailwind, Framer Motion și anime.js. Toate formatează aceleași patru numere, așa că alegeți un tab și faceți clic pe Copiază pentru a pune fragmentul în clipboard.

Cum încarc o valoare cubic-bezier existentă pentru a o edita?

Inserați o valoare precum cubic-bezier(.17, .67, .83, .67) în caseta de import și faceți clic pe Încărcare. Dacă cele patru numere nu pot fi citite, primiți un mesaj de eroare. Curba este stocată și în URL-ul paginii după diez, astfel încât să poată fi partajată.

De ce previzualizarea pare mai lentă decât tranzițiile mele reale?

Previzualizarea mișcării folosește o setare de Durată pe care o puteți modifica, iar valorile implicite sunt mai lente pentru a putea studia curba. Scurtați Durata, apoi folosiți Replay pentru a vedea mișcarea la viteza pe care intenționați să o livrați.

Da. Fiecare unealtă este gratuită, fără cont și fără card de credit. Procesarea se face pe dispozitivul tău, nu pe serverele noastre, ceea ce ne permite să le oferim gratuit.

Funcționează pe mobil?

Da. Funcționează în browserele mobile actuale de pe iOS și Android, fără nimic de instalat.

📈

Generator Easing CSS Cubic-Bezier — gratuit

Proiectează curbe de easing CSS trăgând punctele de control, previzualizează mișcarea live și copiază valoarea cubic-bezier(). Include presetări de overshoot/bounce.

Rulează în browserFără înregistrare, fără ferestre pop-upFără autentificare necesarăGratuit pentru totdeauna

Funcționează offline odată încărcat

Trage mânerele turcoaz și roz pentru a forma curba

Puncte de control

x1y1x2y2

Previzualizare mișcare

Durată1,6 s

Tranziție lățime

Valoare CSS

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

Presetări

Mânerele roz și turcoaz pot fi trase deasupra sau sub casetă (Y dincolo de 0-1) pentru a crea efecte de depășire / săritură ca back-out și anticipate. X rămâne în 0-1 (timpul nu poate merge înapoi).

Utilizări frecvente

Ușurare tranziție CSS personalizatăProiectați ușurări care se simt natural pentru efecte de plutire, meniuri și tranzițiile interfeței utilizatorului.
Animații Bounce și OvershootCreați mișcare plăcută de primăvară/salt trăgând punctele de control dincolo de cutie.
Ușurare pentru animații @keyframesSelectați funcția animation-timing-function corectă pentru animații CSS keyframe.
Valori de ușurare pentru biblioteci de animație JSObțineți valori cubic-bezier pentru GSAP, Framer Motion, anime.js și altele.
Înțelegeți cum funcționează ușurareaVedeți relația dintre o curbă bezier și mișcarea pe care o produce.

Cum funcționează

Editorul este construit în întregime în browser folosind starea React și SVG — nicio bibliotecă nu gestionează matematica curbei. Două puncte de control trăgabile definesc o cale Bezier cubică SVG, iar motorul propriu de animație CSS al browser-ului rulează previzualizarea mișcării injectând valoarea cubic-bezier() rezultată direct într-o regulă @keyframes.

1
Trage sau scrie punctele de control
Două mânere (P1 turcoaz, P2 roz) stau pe un canvas SVG. Tragerea folosește API-ul Pointer Events cu setPointerCapture astfel încât mânerul îți urmărește degetul sau cursorul chiar și în afara limitelor SVG. Poți de asemenea ajusta mânerele cu tastele săgeți sau scrie valori exacte în intrările numerice x1/y1/x2/y2.
2
SVG desenează curba în timp real
Curba este un singur element SVG <path> a cărui comandă C (Bezier cubic) este recalculată din cele patru coordonate ale punctelor de control la fiecare actualizare de stare. Niciun canvas, nicio bibliotecă externă — randorul SVG propriu al browser-ului desenează calea direct.
3
Motorul CSS al browser-ului previzualizează accelerarea
Trei animații live (un punct alunecător, o tranziție de lățime, și o scalare) rulează @keyframes CSS cu valoarea cubic-bezier() injectată inline. Motorul propriu de animație al browser-ului interpretează curba, așa că ceea ce vezi este exact ceea ce va produce CSS-ul tău de producție.
4
Copiază fragmentul în sintaxa framework-ului tău
Filele formatează aceleași patru numere ca o funcție de temporizare de tranziție CSS, o clasă Tailwind cu valoare arbitrară, un array de easing Framer Motion, sau un șir de easing anime.js. Fragmentul este scris în clipboard cu navigator.clipboard. Curba este de asemenea codificată în hash-ul URL (#b=x1,y1,x2,y2), astfel încât o poți partaja sau salva la favorite.