Generatore CSS cubic-bezier con anteprima
Genera una curva CSS cubic-bezier per easing con anteprima nel tuo browser.
🔒 100 % lato client — nessun dato inviato
Questo strumento crea curve cubic-bezier per l'easing delle animazioni CSS, con un'anteprima visiva del movimento. Trascina i punti di controllo e copia il valore pronto da incollare nel tuo foglio di stile. Funziona tutto al 100% nel tuo browser, senza dipendenze esterne.
What is it for?
- ▸ Crea un andamento personalizzato per una transizione fluida CSS
- ▸ Riprodurre una curva di accelerazione di ingresso/uscita su misura
- ▸ Visualizza l'anteprima del movimento di un'animazione prima di integrarla
- ▸ Copia un valore cubic-bezier pronto per una proprietà di transizione
FAQ
Cos'è una funzione cubica di Bezier in CSS?
È una funzione di andamento definita da quattro valori che controllano il modo in cui un'animazione o una transizione accelera e rallenta nel tempo.
Come posso utilizzare un valore cubico di Bezier nel mio CSS?
Copia il valore generato e inseriscilo in una proprietà della funzione di temporizzazione della transizione o della funzione di temporizzazione dell'animazione, ad esempio cubic-bezier(0.25, 0.1, 0.25, 1).
Posso creare un effetto rimbalzo con cubic-bezier?
Sì, posizionando i punti di controllo oltre l'intervallo 0-1 sull'asse verticale, la curva supera il bersaglio e produce un effetto di rimbalzo.