Curve cubic-bezier
La curva, come tabella che si riesce davvero a leggere.
- curva
- 0
Risultato
Type four numbers — 0.42, 0, 0.58, 1 — or pick one of the named curves.
I tuoi file restano sul tuo dispositivo
Questo strumento viene eseguito interamente nel tuo browser. Ciò che incolli viene elaborato sul tuo dispositivo e non viene mai inviato a un server, quindi puoi usarlo in sicurezza con token, chiavi e testi non pubblicati.
Come funziona
- Scegli una curva con nome, oppure scrivi quattro numeri.
- Leggi la tabella: a che punto è il movimento a ogni decimo del tempo.
- Imposta la durata su quella che animerai davvero, così i millisecondi vogliono dire qualcosa.
- Copia la funzione di temporizzazione.
Domande frequenti
- Perché una tabella invece di una curva disegnata?
- Perché la domanda è quasi sempre «è troppo lento all’inizio» oppure «arriva troppo di colpo», e una tabella di avanzamento rispetto al tempo risponde proprio a questo. Una curva disegnata è bella e ti lascia comunque a indovinare i millisecondi.
- Che cosa significano i quattro numeri?
- Due punti di controllo: x1, y1, x2, y2. Le x sono il tempo e devono stare tra 0 e 1. Le y sono l’avanzamento e possono uscire da quell’intervallo: è esattamente ciò che fa superare il punto e tornare indietro.
- Quale dovrei usare?
- Per qualcosa che entra, ease-out: veloce all’inizio, che si posa alla fine. Per qualcosa che esce, ease-in. ease-in-out per uno spostamento tra due posizioni. Lineare per un indicatore che gira, e per quasi nient’altro.
- Che cos’è una curva back?
- Una che supera la destinazione e torna indietro: il piccolo rimbalzo che fa sembrare fisica una finestra di dialogo. Usala su movimenti piccoli e rapidi; su uno grande si legge come un errore.
- Viene inviato qualcosa a un server?
- No. Gira nel browser: quello che scrivi resta sul tuo computer.
Strumenti correlati
◒ Generatore di gradienti CSS Colori da una parte, una dichiarazione dall’altra. ◒ Generatore di box-shadow CSS La dichiarazione, non una tela da trascinare. ◒ Formattatore CSS Una dichiarazione per riga — o l’intero file su una sola. ◒ Convertitore di colore HEX, RGB, HSL e CMYK — più il rapporto di contrasto che decide la leggibilità.