Curve cubic-bezier
La curva, come tabella che si riesce davvero a leggere.
Gli esempi sostituiscono temporaneamente i dati e le impostazioni. Puoi ripristinare il lavoro precedente.
0 caratteri
- curva
- 0
Risultato
Inserisci quattro numeri, ad esempio 0.42, 0, 0.58, 1, oppure scegli una curva.
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.
Esempio
Esempio pratico — Curve cubic-bezier
Scegli una curva con nome, oppure scrivi quattro numeri. Usa i dati e le impostazioni seguenti. Lascia le altre impostazioni ai valori iniziali della pagina.
| Voce | Valore |
|---|---|
| Ingresso | 0.25, 0.1, 0.25, 1 |
| Uscita 1 | cubic-bezier(0.25, 0.1, 0.25, 1) |
| Uscita 2 | 300 ms → 80.2% |
| Uscita 3 | 600 ms → 100% |
Questi quattro valori descrivono ease. A 300 ms su un’animazione di 600 ms, l’avanzamento è circa l’80,2%.
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à.