Generatore di Easing CSS
Generatore online gratuito di easing CSS. Trascina i punti di controllo del cubic-bezier su una curva interattiva, scegli tra 18 preset, guarda una pallina in loop e copia la funzione di timing all'istante.
Cos'è una funzione di easing in CSS?
Una funzione di easing controlla il ritmo con cui un'animazione o transizione avanza nel tempo. Un elemento non deve muoversi a velocità costante: può partire lento, accelerare, superare il bersaglio e assestarsi. In CSS si imposta con transition-timing-function o animation-timing-function.
Cosa significano i quattro numeri di cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definisce una curva tramite due punti di controllo. Il primo modella l'inizio del movimento, il secondo il finale. X rappresenta il tempo su una scala da 0 a 1, Y rappresenta il progresso: 0 è il valore iniziale e 1 quello finale.
Perché Y può uscire da 0 a 1 mentre X no?
X è mappato sul tempo reale, quindi un valore sotto 0 o sopra 1 romperebbe la causalità e la specifica lo vieta. Y è libero: sopra 1 si supera il bersaglio, sotto 0 si arretra prima di avanzare — è così che i preset Back creano la sensazione di rimbalzo.
Qual è la differenza tra ease, ease-in e ease-out?
ease è il valore predefinito del browser, con partenza e atterraggio morbidi; ease-in parte lento e finisce veloce; ease-out parte veloce e rallenta; ease-in-out unisce entrambi. Il generatore include anche preset sine, quad, cubic, quart, expo, back e material — 18 in totale.
Come funziona l'anteprima con la pallina?
Due palline girano in loop per la durata impostata. Quella superiore si muove sempre con una funzione lineare di riferimento, quella inferiore segue la tua curva. Il divario tra loro, che cresce e si stringe, mostra esattamente cosa cambia il tuo easing.
Dove incollo il valore generato?
Usalo come valore di transition-timing-function o animation-timing-function, ad esempio transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Lo strumento restituisce la nuda funzione cubic-bezier(...), pronta per qualsiasi regola.
La funzione di easing influisce sulle prestazioni dell'animazione?
La funzione di timing in sé non costa nulla: rimappa solo il progresso nel tempo. Le prestazioni dipendono dalle proprietà che animi: transform e opacity sono GPU-friendly, mentre animare proprietà di layout come width o top provoca reflow costosi a prescindere dall'easing.
Posso creare un vero effetto rimbalzo o elastico?
Un singolo cubic-bezier può superare il bersaglio una volta, ma non produce i rimbalzi multipli di un vero easing bounce o elastico. Per quello, concatena più keyframe in @keyframes o usa le Web Animations API; il singolo superamento morbido è esattamente ciò che cubic-bezier fa bene e ciò che offre questo strumento.
Quello che faccio qui viene caricato su un server?
No. La curva è disegnata su un canvas locale e l'animazione di anteprima gira interamente nel tuo browser. Nulla viene trasmesso a un server, quindi il generatore funziona anche offline dopo il caricamento della pagina.
Come usare Generatore di Easing CSS
Scolpisci le curve di easing CSS visivamente invece di tirare a indovinare i numeri. Trascina i punti di controllo, confronta il tuo movimento con un riferimento lineare e copia il cubic-bezier finito in un clic. Tutto gira localmente nel tuo browser.
- Scegli uno dei 18 predefiniti come punto di partenza, ad esempio Ease Out, Expo Out o Back Out.
- Trascina le due maniglie sulla curva: l'asse X è il tempo e deve restare tra 0 e 1, l'asse Y è il progresso e può andare oltre.
- Regola con precisione le coordinate esatte di P1 e P2 con i campi numerici se ti serve esattezza.
- Imposta lo slider della durata e osserva le due palline in loop — quella cava è sempre lineare, quella piena usa la tua curva.
- Copia il valore cubic-bezier generato in transition-timing-function o animation-timing-function.
Spingi una maniglia Y sopra 1 per un overshoot sicuro di sé, come cubic-bezier(0.34, 1.56, 0.64, 1) — fa sembrare pulsanti e schede elastici senza alcun keyframe.
Strumenti correlati
- Generatore Gradienti CSS Crea stupendi gradienti CSS visivamente. Genera gradienti lineari, radiali e conici con più punti di colore, angoli e posizioni. Copia istantaneamente codice CSS pronto per la produzione.
- Generatore di Loader CSS Generatore di loader CSS gratuito: dieci spinner di caricamento in CSS puro con controlli in tempo reale di dimensione, velocità, spessore e colore, e copia di HTML e CSS pronti da incollare.
- Generatore di Border Radius Generatore di border radius creativo gratuito online. Trascina 8 punti o scegli una forma blob per creare figure CSS organiche e copiare il codice all'istante.
- Convertitore Colore Convertitore colore online gratuito. Converti formati HEX, RGB, HSL, HSV istantaneamente con selettore visivo. 100% privato, funziona nel tuo browser.
- Generatore Text Shadow CSS Generatore online gratuito di text-shadow CSS. Sovrapponi più livelli d'ombra con offset, sfocatura, colore e opacità, prova preset come Neon, 3D o Retro e copia il CSS all'istante.
- Generatore Clip Path CSS Generatore online gratuito di clip-path CSS. Crea forme polygon, circle, ellipse e inset con punti trascinabili, anteprima live e copia del codice CSS in un clic.
- Abbellitore CSS Formatta e abbellisci il codice CSS istantaneamente. Converti CSS minificato in codice leggibile e ben indentato con opzioni personalizzabili.
- Minificatore CSS Minificatore CSS online gratuito. Comprimi e ottimizza istantaneamente il codice CSS rimuovendo spazi, commenti e caratteri non necessari. Riduci le dimensioni del file per migliori prestazioni web.