Il funzionamento delle curve di easing in CSS
Le transizioni e le animazioni CSS utilizzano le funzioni di timing per determinare come la velocità di un'animazione varia nel corso del tempo. Il Generatore CSS Cubic Bezier consente di creare visivamente queste curve di easing trascinando due punti di controllo. Durante la regolazione della curva, un punto si muove lungo di essa per mostrare l'effetto di easing, posizionato accanto a un secondo punto che si muove a velocità costante per offrire un confronto immediato. Al termine della configurazione, lo strumento fornisce il valore della funzione cubic-bezier() pronto per essere copiato e inserito nel codice CSS.
La curva si sviluppa dall'angolo in basso a sinistra, che rappresenta l'inizio dell'animazione, fino all'angolo in alto a destra, che ne rappresenta la fine. L'asse orizzontale indica lo scorrere del tempo (da sinistra a destra), mentre l'asse verticale rappresenta il progresso dell'animazione (verso l'alto).
Parametri di input e regole di validazione
La forma della curva di easing viene definita attraverso le coordinate di due punti di controllo, espressi nella formula cubic-bezier(x1, y1, x2, y2). Il generatore permette di modificare questi valori in tre modi: trascinando direttamente le maniglie sul grafico, modificando i campi numerici o selezionando un preset predefinito.
I parametri di input devono rispettare regole matematiche precise per garantire la validità della funzione CSS:
- Primo punto di controllo X (x1): Un valore numerico compreso rigorosamente tra
0e1. Rappresenta la coordinata temporale del primo punto di controllo. - Primo punto di controllo Y (y1): Un valore numerico compreso tra
-0.70e1.70. Rappresenta la coordinata di progresso del primo punto. - Secondo punto di controllo X (x2): Un valore numerico compreso rigorosamente tra
0e1. Rappresenta la coordinata temporale del secondo punto di controllo. - Secondo punto di controllo Y (y2): Un valore numerico compreso tra
-0.70e1.70. Rappresenta la coordinata di progresso del secondo punto.
Il sistema applica controlli automatici per correggere gli inserimenti non validi. Se si digita un valore non consentito per la coordinata X, come ad esempio 9, e si perde il focus del campo di testo, il valore viene automaticamente corretto a 1. Se si cancella completamente un campo numerico e si perde il focus, il sistema ripristina l'ultimo valore valido inserito. I campi vuoti o contenenti caratteri non numerici rimangono in attesa di un valore completo prima di aggiornare la curva.
Per una regolazione di precisione, è possibile selezionare una maniglia di controllo e premere il tasto freccia Sinistra: questo ridurrà il valore corrente, portandolo ad esempio a 0.99.
Preset e valori di output
Il generatore include una selezione di preset che corrispondono sia alle parole chiave standard del CSS sia a comportamenti avanzati di anticipazione e superamento dei limiti:
- ease, ease-in, ease-out, ease-in-out: Consentono di analizzare i valori esatti di
cubic-bezier()che si celano dietro le parole chiave predefinite del linguaggio CSS. - Back In, Back Out, Back In-Out: Curve progettate per creare effetti di arretramento o rimbalzo. Ad esempio, selezionando il preset "Back Out", il generatore imposta automaticamente la funzione sul valore
cubic-bezier(0.34, 1.56, 0.64, 1).
L'interfaccia mostra visivamente l'andamento sotto la dicitura "la tua curva" e genera la stringa di codice corrispondente. Una volta cliccato sul pulsante di copia, l'interfaccia mostra lo stato di successo senza generare ulteriori notifiche o avvisi di errore.
Gestione degli effetti di overshoot e limitazioni fisiche
Mentre i valori delle coordinate X (tempo) devono rimanere vincolati tra 0 e 1 per evitare che l'animazione viaggi indietro nel tempo, le coordinate Y (progresso) possono estendersi oltre questi limiti, coprendo l'intervallo da -0.70 a 1.70.
Questa estensione permette di realizzare due comportamenti particolari:
- Anticipazione (pull-back): Impostando un valore Y inferiore a
0, l'animazione inizia muovendosi nella direzione opposta a quella finale, per poi invertire la rotta e accelerare in avanti. - Superamento del limite (overshoot): Impostando un valore Y superiore a
1, l'elemento animato supera temporaneamente la sua posizione finale per poi tornare indietro e stabilizzarsi sul valore di arrivo.
Nonostante questa flessibilità, una singola curva cubic Bezier presenta un limite strutturale invalicabile: può muoversi in una sola direzione, superare il limite o anticiparlo, e infine stabilizzarsi. Non è in grado di riprodurre effetti che richiedono inversioni di direzione multiple e ripetute, come i rimbalzi successivi (bounce) o le oscillazioni elastiche. Per tali comportamenti è necessario ricorrere ad altre soluzioni, come i keyframe CSS o la funzione linear() con più punti di arresto.
Integrazione nei fogli di stile CSS
Il valore ottenuto dal generatore viene utilizzato all'interno delle proprietà CSS dedicate alla gestione del tempo. Può essere applicato singolarmente tramite transition-timing-function o animation-timing-function, oppure inserito all'interno delle proprietà abbreviate transition e animation.
/* Esempio di utilizzo con transition-timing-function */
.elemento {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Esempio di utilizzo con la proprietà abbreviata transition */
.pulsante {
transition: background-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}
Trattamento dei dati e privacy
Il funzionamento del Generatore CSS Cubic Bezier avviene interamente all'interno del client. La curva viene calcolata e disegnata direttamente nel browser dell'utente. Nessun dato inserito nei campi di testo o generato tramite il movimento delle maniglie viene caricato o trasmesso a BroBroGo.
Domande frequenti
Cosa significano le due maniglie e i quattro numeri?
La curva si sviluppa dall'angolo in basso a sinistra (inizio) a quello in alto a destra (fine), con il tempo che scorre da sinistra a destra e il progresso verso l'alto. Le due maniglie sono i punti di controllo che ne determinano la curvatura: ciascuna ha coordinate X e Y, definendo la formula cubic-bezier(x1, y1, x2, y2). La coordinata X rimane compresa tra 0 e 1, mentre la Y può superare i limiti superiore o inferiore per creare l'effetto di rimbalzo o di arretramento prima di stabilizzarsi.
Come si usa il valore ottenuto nel codice CSS?
Copi la funzione cubic-bezier() e la inserisca dove richiesto dalla proprietà di timing, come transition-timing-function, animation-timing-function o la proprietà abbreviata (es. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)). Le parole chiave ease, ease-in, ease-out ed ease-in-out sono semplicemente curve cubic-bezier predefinite: selezionando uno di questi preset vedrà il valore esatto associato.
È possibile creare un effetto di rimbalzo o elastico?
Non da sola. Una singola curva cubic-bezier può anticipare o superare il limite (i preset "back" spingono una maniglia oltre il box proprio per questo), ma può solo muoversi in una direzione e poi stabilizzarsi. Gli effetti di rimbalzo (bounce) o elastici richiedono inversioni di direzione multiple che una singola curva non può esprimere; per quelli sono necessari i keyframe CSS o la funzione linear() con più punti di arresto.