Generator Easing CSS
Generator CSS easing online gratuit. Trage punctele de control cubic-bezier pe o curbă interactivă, alege dintre 18 presetări, privește o animație cu minge în buclă și copiază funcția de timing instant.
Ce este o funcție de easing în CSS?
O funcție de easing controlează ritmul în care o animație sau tranziție progresează în timp. Un element nu trebuie să se miște cu viteză constantă: poate porni încet, accelera, depăși ținta și apoi se așeza. În CSS se setează cu proprietățile transition-timing-function sau animation-timing-function.
Ce înseamnă cele patru numere din cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definește o curbă prin două puncte de control. Primul punct modelează începutul mișcării, al doilea finalul. X reprezintă timpul pe o scală de la 0 la 1, iar Y reprezintă progresul: 0 este valoarea inițială, 1 este valoarea finală.
De ce Y poate ieși din intervalul 0–1, dar X nu?
X este mapat pe timpul real, astfel încât o valoare sub 0 sau peste 1 ar rupe cauzalitatea și specificația o interzice. Y este liber: peste 1 treci de țintă, sub 0 te retragi întâi — așa creează presetările Back senzația de revenire.
Care este diferența dintre ease, ease-in și ease-out?
ease este valoarea implicită a browserului, cu pornire și aterizare blânde; ease-in pornește încet și termină rapid; ease-out pornește rapid și încetinește; ease-in-out le combină pe amândouă. Generatorul include și presetările sine, quad, cubic, quart, expo, back și material — 18 în total.
Cum funcționează previzualizarea cu mingea?
Două mingi rulează în buclă pe durata setată. Mingea de sus se mișcă întotdeauna cu o funcție liniară ca referință, iar cea de jos urmează curba ta. Distanța dintre ele, care crește și se strânge, arată exact ce schimbă easing-ul tău.
Unde lipesc valoarea generată?
Folosește-o ca valoare pentru transition-timing-function sau animation-timing-function, de exemplu transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Instrumentul returnează funcția cubic-bezier(...) nudă, gata pentru orice regulă.
Funcția de easing afectează performanța animației?
Funcția de timing în sine nu costă nimic: doar remapează progresul în timp. Performanța depinde de proprietățile pe care le animezi: transform și opacity sunt prietenoase cu GPU, în timp ce animarea proprietăților de aspect precum width sau top provoacă reflow-uri scumpe indiferent de easing.
Pot crea un efect real de rebondire sau elastic?
Un singur cubic-bezier poate depăși ținta o dată, dar nu poate produce multiplele reveniri ale unui easing bounce sau elastic adevărat. Pentru asta, înlănțuiște mai multe keyframe-uri în @keyframes sau folosește Web Animations API; depășirea unică și fină este exact ce face bine cubic-bezier și ce oferă acest instrument.
Ce fac aici este încărcat undeva?
Nu. Curba este desenată pe un canvas local, iar animația de previzualizare rulează complet în browserul tău. Nimic nu este transmis către un server, astfel încât generatorul funcționează și offline după încărcarea paginii.
Cum se folosește Generator Easing CSS
Ritărește curbele de easing CSS vizual în loc să ghicești numere. Trage punctele de control, compară mișcarea ta cu o referință liniară și copiază cubic-bezier-ul terminat într-un singur clic. Totul rulează local în browserul tău.
- Alege unul dintre cele 18 presetări ca punct de plecare, precum Ease Out, Expo Out sau Back Out.
- Trage cele două mânere de pe curbă: axa X e timpul și trebuie să rămână între 0 și 1, axa Y e progresul și poate depăși.
- Ajustează fin coordonatele exacte ale P1 și P2 cu câmpurile numerice dacă ai nevoie de precizie.
- Setează cursorul de durată și urmărește cele două mingi în buclă — cea goală e mereu liniară, cea plină folosește curba ta.
- Copiază valoarea cubic-bezier generată în transition-timing-function sau animation-timing-function.
Împinge un mâner Y peste 1 pentru un depășire încrezătoare, precum cubic-bezier(0.34, 1.56, 0.64, 1) — face butoanele și cardurile să pară elastice fără vreun keyframe.
Instrumente conexe
- Generator Gradient CSS Creați gradienturi CSS uimitoare vizual. Generați gradienturi liniare, radiale și conice cu mai multe opriri de culoare, unghiuri și poziții. Copiați instantaneu cod CSS gata de producție.
- Generator de Loader-e CSS Generator de loader-e CSS gratuit: zece spinner-e de încărcare în CSS pur cu reglaj live al dimensiunii, vitezei, grosimii și culorii, plus HTML și CSS gata de copiat.
- Generator de Border-radius Generator de border-radius creativ gratuit online. Trage 8 mânere sau alege o formă blob pentru a crea forme CSS organice și copiază codul instantaneu.
- Convertor Culori Convertor culori online gratuit. Convertiți instantaneu formatele HEX, RGB, HSL, HSV cu selector vizual. 100% privat, rulează în browserul dvs.
- Generator Text Shadow CSS Generator text-shadow CSS online gratuit. Stivă mai multe straturi de umbră cu offset, blur, culoare și opacitate, încearcă presetări Neon, 3D, Retro și copiază codul CSS instant.
- Generator CSS Clip Path Generator CSS clip-path online gratuit. Creează forme polygon, circle, ellipse și inset cu puncte glisabile, previzualizare live și copierea codului CSS dintr-un clic.
- Frumusețare CSS Formatați și frumusețați codul CSS instantaneu. Convertiți CSS minificat în cod lizibil cu opțiuni personalizabile.
- Minificator CSS Minificator CSS online gratuit. Comprimați și optimizați instantaneu codul CSS eliminând spațiile, comentariile și caracterele inutile. Reduceți dimensiunea fișierului pentru performanță web mai rapidă.