Editor de atenuare Cubic-Bézier
Proiectează curbe de atenuare cubic-bezier personalizate cu un editor cu mânere și previzualizare animată în timp real.
Trage cele două mânere pentru a modela curba de atenuare.
transition-timing-function: -;
animation-timing-function: -;
Totul rulează în browserul tău: nimic nu este încărcat.
Despre Editor de atenuare Cubic-Bézier
Cubic-Bézier Easing Editor proiectează funcții de temporizare (timing functions) personalizate pentru tranziții și animații CSS. Trage cele două mânere de control pe canvasul curbei, iar valoarea cubic-bezier(x1, y1, x2, y2) se actualizează live; o previzualizare de animație redă easing-ul alături de o referință liniară, astfel încât poți simți diferența, cu o durată ajustabilă și reluare instantanee.
Zece presetări acoperă vocabularul comun: ease standard, ease-in, ease-out și ease-in-out, plus curbe expresive precum back și anticipate care depășesc punctele finale, și rampe de accelerare și decelerare în stil material. Folosește-le ca atare sau ca puncte de plecare pentru a le trage în ceva propriu.
Poți introduce și coordonate exacte ale punctelor de control, apăsa randomize pentru inspirație și copia fie valoarea simplă cubic-bezier(), fie o regulă CSS gata de lipit. Întregul editor rulează în browserul tău.
Cum să utilizați Editor de atenuare Cubic-Bézier
- Trage cele două mânere de pe editorul curbei pentru a modela easing-ul.
- Dă clic pe Reluare și compară animația cu easing față de referința liniară, ajustând durata dacă e nevoie.
- Încearcă presetările (ease, back, anticipate, material și altele) pentru un punct de plecare rapid.
- Ajustează fin cu intrările numerice ale punctelor de control pentru valori exacte.
- Copiază valoarea cubic-bezier() sau fragmentul CSS complet.