Generatore cubic-bezier: trascina una curva di easing, copia il CSS | We.Inc
Trascina due maniglie per modellare una curva di easing cubic-bezier(), mettila in gara con linear ed ease, parti dalle keyword della specifica o dai preset Tailwind e copia il CSS o una classe Tailwind.
Una curva di easing cubic-bezier(x1, y1, x2, y2) va da 0,0 a 1,1 ed è piegata da due punti di controllo. Entrambi i valori x devono restare tra 0 e 1, altrimenti il browser scarta l'intera dichiarazione, mentre i valori y possono scendere sotto 0 o salire sopra 1 per creare un overshoot. Trascina le maniglie qui sotto e guarda i punti gareggiare.
Le keyword di easing CSS come valori cubic-bezier() (CSS Easing Functions Level 1)
Keyword
Valore cubic-bezier()
Sensazione
cubic-bezier(0, 0, 1, 1)
Velocità costante, meccanica
ease (il predefinito)
cubic-bezier(0.25, 0.1, 0.25, 1)
Partenza rapida, arresto lungo e dolce
cubic-bezier(0.42, 0, 1, 1)
Partenza lenta, arresto brusco
cubic-bezier(0, 0, 0.58, 1)
Partenza veloce, atterraggio morbido
cubic-bezier(0.42, 0, 0.58, 1)
Morbida a entrambe le estremità
Scrivere quattro numeri e indovinare che effetto daranno raramente funziona. Qui modelli la curva a mano, vedi i numeri aggiornarsi e confronti il movimento fianco a fianco con una linea retta e con il predefinito del browser prima di incollare qualcosa nel tuo foglio di stile.
Trascina le maniglie blu e rosa sul grafico, oppure scrivi i numeri esatti nei quattro campi. I campi x sono limitati all'intervallo da 0 a 1.
Premi Riproduci per mandare tre punti lungo la pista nello stesso momento: la tua curva, linear ed ease.
Scegli un preset per partire dalle keyword della specifica, dai predefiniti di Tailwind o da una delle nostre curve con overshoot.
Copia la dichiarazione CSS o la classe arbitraria di Tailwind.
Usa ease-out per gli elementi che entrano nello schermo ed ease-in per quelli che escono. Gli elementi che si spostano tra due punti visibili di solito rendono meglio con ease-in-out.
Un y1 sopra 1 fa superare al movimento il suo obiettivo per poi tornare indietro. Mantieni l'overshoot contenuto per i movimenti dell'interfaccia, intorno a 1.2 fino a 1.6.
Le durate brevi nascondono le differenze tra le curve. Valuta una curva a 600 millisecondi o più, poi accorciala.
Rispetta chi chiede meno movimento: racchiudi gli spostamenti ampi in @media (prefers-reduced-motion: no-preference).
Domande frequenti
Cosa significano i quattro numeri di cubic-bezier()?
Sono le coordinate dei due punti di controllo: x1 e y1 per il primo, x2 e y2 per il secondo. L'asse x è la frazione della durata già trascorsa e l'asse y indica quanto è avanzato il valore animato.
Perché il mio cubic-bezier viene ignorato?
Se uno dei due valori x è minore di 0 o maggiore di 1, la funzione non è valida e il browser scarta la dichiarazione, tornando al valore applicato in precedenza. Verifica che x1 e x2 siano tra 0 e 1.
ease-in ed ease-out di Tailwind sono uguali alle keyword CSS?
No. Il tema predefinito di Tailwind definisce ease-in come cubic-bezier(0.4, 0, 1, 1), ease-out come cubic-bezier(0, 0, 0.2, 1) ed ease-in-out come cubic-bezier(0.4, 0, 0.2, 1), che differiscono dalle keyword CSS con lo stesso nome. Entrambi i gruppi sono preset nell'editor, così puoi confrontarli.
Come uso una curva personalizzata in Tailwind?
Scrivi il valore tra parentesi quadre senza spazi, per esempio ease-[cubic-bezier(0.34,1.56,0.64,1)]. Per riutilizzarla, dichiara una variabile di tema come --ease-springy in @theme e Tailwind crea una classe ease-springy.
Una curva di Bézier può creare un rimbalzo con più salti?
No. Una curva cubica può superare l'obiettivo una volta e tornare indietro, ma non può rimbalzare più volte. Per un rimbalzo a più salti usa @keyframes con diversi passaggi oppure la più recente funzione linear(), che accetta una lista di punti.
Leggere il grafico
Il tempo scorre da sinistra a destra e l'avanzamento dal basso verso l'alto. Un tratto ripido della curva significa movimento veloce, un tratto piatto significa che l'elemento si muove appena. La linea da un angolo all'altro è il movimento lineare.
Le maniglie sopra il bordo superiore o sotto quello inferiore spingono per un attimo l'avanzamento oltre il 100 percento o sotto lo 0 percento. È così che ottieni un overshoot morbido senza scrivere keyframe.
Dove va la curva nel CSS
Lo stesso valore funziona in transition-timing-function, animation-timing-function e nelle shorthand transition e animation. Dentro @keyframes, una timing function impostata su un keyframe vale solo per il tratto fino al keyframe successivo.
Alcune proprietà non possono scendere sotto zero, come opacity o una larghezza. Se una curva scende sotto 0, quei valori vengono limitati, quindi l'avvallamento semplicemente non si vede.
Valori dei preset
I primi cinque vengono dalla specifica CSS Easing Functions. Le righe Tailwind sono il tema predefinito di quel framework. Le righe con overshoot sono punti di partenza che abbiamo regolato a occhio.
Tutti i preset dell'editor
Nome
Origine
Valore
Keyword CSS
cubic-bezier(0, 0, 1, 1)
Keyword CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Keyword CSS
cubic-bezier(0.42, 0, 1, 1)
Keyword CSS
cubic-bezier(0, 0, 0.58, 1)
Keyword CSS
cubic-bezier(0.42, 0, 0.58, 1)
ease-in (Tailwind)
Predefinito Tailwind
cubic-bezier(0.4, 0, 1, 1)
ease-out (Tailwind)
Predefinito Tailwind
cubic-bezier(0, 0, 0.2, 1)
ease-in-out (Tailwind)
Predefinito Tailwind
cubic-bezier(0.4, 0, 0.2, 1)
uscita elastica
Overshoot
cubic-bezier(0.34, 1.56, 0.64, 1)
Overshoot
cubic-bezier(0.6, -0.4, 0.4, 1.4)
Overshoot
cubic-bezier(0.2, 0.9, 0.3, 1.1)
Usare una curva personalizzata
Card al passaggio del mouse con overshoot
Passa il mouse sulla card. Si solleva un po' oltre il punto di riposo e poi si assesta, tutto grazie alla timing function.
Tailwind: classe singola e token di tema riutilizzabile
La forma con parentesi quadre non vuole spazi. La variabile @theme trasforma la curva in una classe con nome.
Editor di curve di easing
Trascina le maniglie o scrivi i valori, premi Riproduci per mettere in gara la tua curva con linear ed ease, poi copia il CSS o la classe Tailwind.
Keyword CSS
Keyword CSS
Keyword CSS
Keyword CSS
Keyword CSS
Predefinito Tailwind
Predefinito Tailwind
Predefinito Tailwind
Overshoot
Overshoot
Overshoot
Grafico della curva di easing. Trascina le due maniglie per modificare la curva.
Primo punto di controllo
Secondo punto di controllo
Preset di easing
Durata: {n} ms
Riproduci
La tua curva
Copia CSS
Copia classe Tailwind
Questa curva equivale alla keyword CSS {v}.
I valori x restano tra 0 e 1. I valori y possono andare oltre.