Visualizzatore CSS Easing e Cubic-Bezier
Trascina le maniglie SVG, digita i valori o scegli tra oltre 30 curve predefinite. Anteprima animata in tempo reale e output pronto da copiare per CSS, GSAP e Framer Motion.
Cos'è una curva cubic-bezier?
Una curva cubic-bezier è una curva parametrica definita da quattro punti: un inizio (sempre 0,0), una fine (sempre 1,1) e due maniglie di controllo le cui coordinate puoi scegliere. CSS, le librerie di animazione JavaScript e la maggior parte degli strumenti di design utilizzano questa curva per mappare l'avanzamento dell'animazione (0 → 1) sull'avanzamento del valore (0 → 1) — quando la curva si piega sotto la diagonale, l'animazione rallenta e poi recupera; sopra, scatta in avanti e poi si stabilizza. I quattro numeri cubic-bezier(x1, y1, x2, y2) sono semplicemente le due coordinate delle maniglie.
Come usare questo visualizzatore
Trascina le due maniglie colorate all'interno dell'SVG per modellare la curva, oppure digita direttamente i quattro valori. Scegli tra oltre 30 preset predefiniti — classici come easeOutCubic, l'intero set di Robert Penner, oltre alle curve moderne dei toolkit UI (Material, swift-out di Apple). L'anteprima dal vivo anima una forma di esempio con la tua curva attuale così percepisci il timing, non solo vedi la forma. Il pannello di output emette lo stesso easing in tre varianti: cubic-bezier() CSS puro, CustomEase di GSAP e tupla array di Framer Motion — copia quella che usa il tuo stack.
Scegliere la curva giusta
Usa le curve ease-out (maniglie basse-poi-alte) per le entrate — il contenuto arriva rapidamente e poi si stabilizza, dando una sensazione reattiva. Usa ease-in per le uscite — l'occhio non ha bisogno di seguire da vicino il contenuto che esce. Usa ease-in-out per spostamenti sullo schermo, come una card che scivola da una posizione all'altra. Le curve back / overshoot (dove y2 > 1) aggiungono carattere ai momenti giocosi ma risultano poco professionali su UI finanziarie o di produttività. Linear è raramente la scelta giusta per l'animazione UI — risulta meccanica all'occhio umano anche se matematicamente uniforme.
Domande frequenti
Perché i valori y a volte sono fuori dall'intervallo 0–1?
x1 e x2 sono limitati a 0–1 dalle specifiche (i punti di controllo non possono spostarsi oltre gli estremi della timeline), ma y1 e y2 possono scendere sotto 0 o salire sopra 1. È così che funzionano gli easing "back" — il valore supera brevemente il suo obiettivo prima di stabilizzarsi, come una molla che rimbalza in posizione.Perché la curva Material ha un set di valori e Material 3 un altro?
(0.4, 0, 0.2, 1) è stata rilasciata con Material 1 nel 2014. Material 3 (2021) ha introdotto una famiglia diversa basata su un sistema spring personalizzato che non si riduce a un singolo cubic-bezier — quello che vedi qui è l'approssimazione classica più vicina. Per il timing esatto di Material 3, usa i token ufficiali di Google.Dovrei usare cubic-bezier o la fisica spring?
Posso animare questo in CSS senza JavaScript?
transition-timing-function e animation-timing-function, entrambi eseguiti sul thread compositor del browser senza una singola riga di JS. Gli output delle librerie sono utili solo se stai già animando con quella libreria — inserisci il cubic-bezier nel campo ease.Qual è la durata giusta?
Queste curve funzionano nelle WebView mobili?
cubic-bezier() è nelle specifiche CSS dal CSS3 ed è stato implementato in ogni browser mobile entro il 2013. I tipi di animazione che vedi qui (transform translate / rotate / scale) sono anch'essi compositati su GPU ovunque, quindi l'anteprima è rappresentativa delle prestazioni in produzione.