Generatore Cubic-Bezier CSS

Che cos'è questo strumento?

cubic-bezier() è una funzione di temporizzazione CSS che controlla come un valore animato o in transizione accelera e decelera nel tempo, invece di muoversi a velocità costante. È definita da due punti di controllo — (x1, y1) e (x2, y2) — che curvano una linea tra un punto di partenza fisso (0,0) e un punto finale fisso (1,1). I valori x devono restare tra 0 e 1, ma i valori y possono uscire da questo intervallo per creare effetti di overshoot o rimbalzo.

Regolare a mano quattro numeri decimali per ottenere una sensazione né troppo brusca né troppo blanda richiede molti tentativi. Questo strumento sostituisce quel tentare al buio con la manipolazione diretta: sposti un cursore, osservi la curva piegarsi e la pallina di anteprima muoversi di conseguenza, e copi il CSS quando il movimento ti convince.

Fonte: CSS Easing Functions Level 1, W3C — la specifica che definisce cubic-bezier() e le cinque parole chiave nominate su cui si basano i preset di questo strumento.

Perché usarlo?

• Un grafico SVG dal vivo mostra esattamente come la tua curva si piega tra i punti fissi di inizio e fine, con entrambi i punti di controllo e le loro maniglie disegnati con chiarezza.
• Il pulsante Play anima un elemento di anteprima lungo una pista usando la tua curva esatta, così puoi sentire il movimento e non solo vedere un grafico statico.
• Preimpostazioni con un clic per le cinque funzioni di easing standard con nome — ease, ease-in, ease-out, ease-in-out e linear — come documentato nella specifica CSS Easing Functions.
• I valori y possono scendere sotto 0 o superare 1, permettendo di creare effetti di overshoot/rimbalzo che le parole chiave nominate non possono produrre.
• Genera CSS transition-timing-function pronto da incollare — lo stesso valore funziona anche per animation-timing-function.
• Funziona interamente nel tuo browser — nulla di ciò che configuri viene caricato da nessuna parte. Gratis, senza registrazione.

Come si usa

1. Trascina i cursori x1/y1 per impostare il primo punto di controllo, che modella l'inizio dell'animazione.
2. Trascina i cursori x2/y2 per impostare il secondo punto di controllo, che modella la fine dell'animazione.
3. Osserva la curva nera nel grafico — se si gonfia sopra la diagonale all'inizio, il movimento parte veloce; se resta sotto, parte lento.
4. Clicca su Play per vedere un elemento di anteprima muoversi lungo la pista usando la tua curva come transition-timing-function.
5. Prova una preimpostazione (ease, ease-in, ease-out, ease-in-out, linear) come punto di partenza, poi affina i cursori da lì.
6. Copia il CSS generato e incollalo in una regola di transizione o animazione.

Esempio

Input

x1: 0,25, y1: 0,1, x2: 0,25, y2: 1

Risultato

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

Questi sono i punti di controllo esatti della parola chiave standard ease di CSS — partenza rapida, poi un rallentamento graduale verso la fine.

Perché i valori y possono superare 0–1

A differenza dell'asse x, che rappresenta il tempo e deve andare da 0 a 1, l'asse y rappresenta il progresso del valore animato e non ha questo limite. Impostare y1 sotto 0 o y2 sopra 1 fa affondare la curva prima del valore iniziale o superare il valore finale prima di assestarsi — la base degli effetti di overshoot e anticipazione usati nelle pressioni dei pulsanti, nella comparsa delle modali e nelle micro-interazioni giocose dell'interfaccia. Nessuna delle cinque parole chiave nominate (ease, ease-in, ease-out, ease-in-out, linear) può produrre questo; serve un cubic-bezier() personalizzato.

transition-timing-function contro animation-timing-function

Il valore cubic-bezier() generato da questo strumento funziona in modo identico in entrambe le proprietà. Usa transition-timing-function quando il movimento è innescato da un cambio di stato (come un hover o un cambio di classe), e animation-timing-function all'interno di una regola di animazione guidata da @keyframes quando serve la stessa sensazione applicata automaticamente o in loop.

Pattern di easing comuni

• Feedback UI scattante (pulsanti, interruttori): tieni i punti di controllo vicini alla diagonale con una leggera inclinazione ease-out, ad esempio cubic-bezier(0.4, 0, 0.2, 1).
• Curva standard di Material Design: cubic-bezier(0.4, 0, 0.2, 1) — partenza rapida, finale morbido, molto usata per transizioni di pannelli e card.
• Rimbalzo/overshoot: porta y2 sopra 1, ad esempio cubic-bezier(0.34, 1.56, 0.64, 1), per una sensazione giocosa in comparsa.
• Anticipazione prima del movimento: porta y1 sotto 0 così l'elemento arretra leggermente prima di avanzare.
• Ease-in-out fluido per animazioni in loop: mantieni la curva quasi simmetrica rispetto al centro.

Abbinamento con altri strumenti CSS

Una curva di easing raramente si usa da sola — di solito è applicata a un elemento che ha bisogno anche di ombre, angoli arrotondati o gradienti. Genera lo stile visivo con gli altri strumenti CSS qui sotto, poi aggiungi la funzione di temporizzazione di questo strumento alla stessa regola o dichiarazione transition/animation.

→ Generatore di ombreggiatura dei riquadri · Generatore di raggio di bordo

Domande frequenti