Editor di curve di accelerazione
Easing Curve Editor
Regola una curva cubic-bezier o a molla guardando un’anteprima animata e restituisce la funzione di temporizzazione CSS.
Permette di trascinare una curva di accelerazione cubic-Bézier e mostra che cosa fa a un movimento reale: un blocco animato dal compositore del browser stesso, più una striscia della stessa curva campionata a passi di tempo regolari, così la forma si legge invece di limitarsi a farsi sentire.
Trascina uno dei due punti, oppure mettilo a fuoco e usa le frecce: con shift il passo è dieci volte più lungo. La fascia ombreggiata va da 0 a 1; lo spazio sopra e sotto è lo sforamento, che esiste solo perché CSS limita la x e lascia libera la y.
La x è limitata a 0–1 perché CSS lo impone: fuori da quell’intervallo l’intera dichiarazione non è valida e il browser la scarta. La y è libera di proposito: sopra 1 si ottiene lo sforamento, sotto 0 la rincorsa, ed è più o meno tutto il motivo per cui si modifica una curva a mano.
La striscia qui sotto è la stessa curva campionata in venti passi di tempo uguali. Segni che si addensano vogliono dire che lì l’animazione è lenta, segni che si allargano che è veloce: è la forma della curva detta come movimento.
Preimpostazioni
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);Come si usa
Trascinare i due punti di controllo
Oppure dare il fuoco a uno e usare i tasti freccia: con shift si sposta di dieci volte tanto. I numeri sotto accettano valori digitati, per quando c’è una curva da riprodurre.
Guardare la striscia, non il blocco
Un blocco in movimento è difficile da leggere. I segni sotto sono la curva a venti passi di tempo uguali: addensati vuol dire lento, distanziati vuol dire veloce.
Copiare il valore o l’intera transizione
Se i punti cadono esattamente su una parola chiave — `ease`, `ease-in-out` — viene emessa quella, perché è più corta e dichiara l’intenzione.
Domande frequenti
Perché non posso trascinare la x fuori da 0–1?
Perché il CSS lo vieta. Una x fuori da quell’intervallo rende non valida l’intera dichiarazione e il browser scarta la proprietà, quindi lo strumento la limita invece di lasciar costruire qualcosa che in silenzio non fa nulla.
A che serve una y fuori da 0–1?
All’oltrepassamento sopra 1 — l’elemento va oltre il bersaglio e ci si riassesta — e all’anticipazione sotto 0, dove indietreggia prima di partire. Quei due casi sono buona parte del motivo per cui si modifica una curva invece di prendere una parola chiave.
L’anteprima è fedele?
Sì: passa la funzione di temporizzazione al browser come animazione CSS, cioè lo stesso percorso di codice che prenderà la `transition` vera. Campionare la curva in un ciclo JavaScript avrebbe un aspetto simile e non sarebbe la stessa cosa.
Posso ottenere una molla o un rimbalzo?
Non una vera. Una Bézier cubica ha due punti di controllo e può oltrepassare il bersaglio una volta sola; una molla oscilla e richiede `linear()` con molte tappe, oppure una libreria di animazione basata sulla fisica. L’oltrepassamento che si ottiene qui è il massimo a cui arriva una curva sola.
Può ricevere da
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Generatore di ombre CSS
Box Shadow Generator
Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.
Editor di tracciati SVG
SVG Path Editor
Converte i dati di un tracciato tra comandi assoluti e relativi, lo sposta, lo ridimensiona, lo ruota e ne inverte il verso, e mostra il riquadro di delimitazione con l’anteprima.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.