CSS Cubic Bezier Easing Generator
Craft CSS cubic-bezier easing curve trascinando punti di controllo e guardare il gioco di easing dal vivo, quindi copiare la funzione di tempistica.
Something went wrong
Drag the control points
Presets
Animation preview
CSS
How to use Cubic Bezier Generator
- Trascinare i punti di controllo blu e rosa sulla curva, o digitare x1, y1, x2, y2 valori negli ingressi.
- Fare clic su una preimpostazione come la facilità di in-out o la facilità-out-back per caricare una curva di easing comune o overshoot.
- Guarda il punto animare con il tuo easing, premere Gioca per riprodurlo, quindi fare clic su Copia CSS per afferrare la regola cubic-bezier.
Che cos'e'?
Il Cubic Bezier Generator è un editor interattivo per le curve di easing CSS. Trascinare i due punti di controllo sulla curva dell'unità-quare per modellare come un'animazione accelera e decelerates, quindi leggere i valori esatti cubic-bezier() nei quattro ingressi numerici — o digitare i valori direttamente per spostare le maniglie. Un'anteprima dell'animazione incorporata sposta un punto attraverso la traccia utilizzando la curva come transition-timing-function , rielaborando automaticamente ogni volta che si cambia un valore o premere Play. Tutto il calcolo avviene nel tuo browser. Quando la curva si sente bene, copiare la linea di temporizzazione pronta all'uso nel CSS
FAQ
- Cosa fa cubic-bezier() in CSS?
- cubic-bezier() definisce una curva di easing personalizzata per transizioni e animazioni utilizzando due punti di controllo (x1, y1, x2, y2). Controlla la velocità dell'animazione nel corso del tempo, permettendo di creare effetti oltre le parole chiave integrate, facilità e facilità .
- Perché i valori Y possono andare sotto 0 o sopra 1?
- I valori X sono fissati a 0–1 perché il tempo non può essere eseguito all'indietro, ma i valori Y possono estendersi oltre l'intervallo 0–1 per creare overshoot e anticipazione. Questo è il modo in cui 'back' e 'bounce' si spostano brevemente oltre o prima del bersaglio prima di impostare.
- Come posso usare la curva generata?
- Copiare il valore cubic-bezier() in una dichiarazione di transizione o di animazione, ad esempio: transizione: tutti 0.3s cubic-bezier(0.42, 0, 0.58, 1); Il generatore emette anche una linea di funzionalità di transizione pronta che è possibile incollare direttamente.
Related tools
- Clip Path Generator
- CSS Gradient Generator
- Box Shadow Generator
- Color Palette Generator
- Keyframes Animation Generator
- CSS Transform Generator
Author
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.
People also use
- CSS Transform Generator🗄️ Developer Tools
Build CSS transforms visually — translate, scale, rotate, skew plus 3D rotateX/Y/Z and perspective. Live preview on a grid and copy the CSS, in-browser.
- Keyframes Animation Generator🗄️ Developer Tools
Build CSS @keyframes animations — fade, slide, bounce, pulse, spin, flip, zoom — tune duration, easing, delay and loop, preview live and copy the CSS.
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
Last updated: