Generatore di Bezier cubici CSS

Cos'è cubic-bezier?

CSS cubic-bezier() definisce una funzione di temporizzazione personalizzata per transizioni e animazioni CSS. I quattro numeri controllano due punti di una curva di Bézier, permettendo un'accelerazione finemente regolabile da ease-in a effetti tipo rimbalzo.

Curve di Bézier, lignaggio matematico

Le curve prendono il nome da Pierre Bézier, un ingegnere francese a Renault che le ha usate negli anni '60 per progettare i pannelli di carrozzeria lisci della Renault 16, pubblicate nel 1968 come parte del sistema CAD UNISURF di Renault. La matematica era stata sviluppata indipendentemente qualche anno prima (1959) da Paul de Casteljau a Citroën, ma Citroën ha tenuto il lavoro di de Casteljau come segreto industriale e la versione pubblicata di Bézier è diventata il riferimento canonico. Entrambi gli uomini sono arrivati alla stessa famiglia di curve polinomiali definite da punti di controllo, l'algoritmo di de Casteljau per valutare una curva di Bézier a un dato parametro prende il nome dal pioniere non pubblicato. Le curve di Bézier cubiche sono diventate la primitiva universale della grafica vettoriale perché sono economiche da valutare (poche moltiplicazioni e somme), banalmente scalabili (la matematica è invariante sotto trasformazioni affini) e localmente controllabili (spostare un punto di controllo cambia solo segmenti di curva vicini). Adobe PostScript (1984) e PDF, la specifica SVG (W3C Recommendation settembre 2001) e ogni formato di font moderno usano curve di Bézier cubiche come blocco di costruzione per forme di lettera, icone e illustrazioni. CSS ha adottato lo stesso tipo di curva per il timing delle animazioni, prendendo in prestito la primitiva matematica standard del mondo del visual design per il nuovo caso d'uso di descrivere il movimento.

La spec delle animazioni CSS e le timing function

Le animazioni CSS e le transizioni usano entrambe la stessa famiglia di timing function. La spec CSS Animations Level 1 è stata pubblicata per la prima volta come Working Draft pubblico nel marzo 2009 (estratta da implementazioni precedenti con prefisso WebKit) e continua a essere mantenuta dal CSS Working Group del W3C. Il modulo CSS Easing Functions Level 1 formalizza la sintassi della timing function ed è attualmente una Candidate Recommendation. Cinque keyword nominate sono alias per cubic-bezier specifiche: ease = cubic-bezier(0.25, 0.1, 0.25, 1), il default CSS per le transizioni, con un avvio veloce e una conclusione lenta che sembra naturale per la maggior parte del movimento UI. ease-in = cubic-bezier(0.42, 0, 1, 1), inizia lento, accelera fino a una conclusione veloce. ease-out = cubic-bezier(0, 0, 0.58, 1), avvio veloce, decelera fino a conclusione lenta; questo è generalmente l'easing più usato per gli elementi UI che entrano nel viewport. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1), curva a S simmetrica, lenta a entrambe le estremità. linear = cubic-bezier(0, 0, 1, 1), nessun easing, velocità costante; raramente la scelta giusta per UI ma appropriata per animazioni in loop continuo come gli spinner. CSS offre anche due opzioni di timing non Bézier: steps(n, jumpterm) per animazione a passi (frame per frame) e linear() (aggiunto in CSS Easing Level 2) per funzioni lineari a tratti che approssimano qualsiasi curva.

Curve di easing dei design system

I principali design system pubblicano curve di easing opinionate che sovrascrivono i default CSS. Google Material Design specifica "standard easing" come cubic-bezier(0.4, 0, 0.2, 1), accelerazione veloce, decelerazione lenta, usato per la maggior parte delle transizioni UI in Android e nella libreria web Material; "decelerated easing" cubic-bezier(0, 0, 0.2, 1) per elementi che entrano nello schermo; "accelerated easing" cubic-bezier(0.4, 0, 1, 1) per elementi che escono. Le Human Interface Guidelines di Apple enfatizzano animazioni a fisica di molla invece che curve Bézier fisse, ma UIKit di iOS spedisce un cubic-bezier predefinito di circa (0.25, 0.1, 0.25, 1) (lo stesso del CSS ease). Il Carbon Design System di IBM usa cubic-bezier(0.5, 0, 0.1, 1) per la sua categoria di productive-motion. Microsoft Fluent, Atlassian, Salesforce Lightning specificano tutti le proprie curve. Le equazioni di easing di Robert Penner (pubblicate nel 2001 come parte del suo libro sul motion in Flash) hanno definito il vocabolario delle curve nominate che quasi ogni libreria di animazione usa, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. La maggior parte può essere espressa come cubic-bezier; le varianti elastic e bounce non possono (richiedono funzioni a tratti multiparte perché oscillano).

Scegliere la curva giusta per il lavoro

• Elementi che entrano nel viewport (modali che appaiono, card che scorrono dentro, dropdown che si aprono), usa ease-out o una curva decelerata come cubic-bezier(0, 0, 0.2, 1) di Material. L'elemento decelera mentre arriva, il che fa sentire come se si stesse "sistemando in posizione".
• Elementi che lasciano il viewport (modali che si chiudono, card che scorrono fuori), usa ease-in o una curva accelerata. L'elemento accelera mentre se ne va, sembrando che parta con intenzione.
• Animazioni continue (loader, barre di progresso, movimento ambientale), usa linear. L'easing fa sembrare il movimento continuo a scatti; la velocità costante si legge come stabile.
• Stati hover e pressioni di pulsanti, durata breve (100-150 ms) con ease-out per l'hover-in e ease-in o nessun easing per l'hover-out. Il feedback dei pulsanti dovrebbe sentirsi scattante.
• Movimento enfatico che ha bisogno di personalità (notifiche toast, indicatori di successo), usa una curva leggermente in sovraelongazione come cubic-bezier(0.34, 1.56, 0.64, 1) per un sottile rimbalzo che segnala "qualcosa di interessante è appena accaduto" senza essere fastidioso.
• Animazioni più lunghe (oltre 500 ms), usa ease-in-out o una curva a S simile. Le animazioni lunghe con easing su un solo lato sembrano avere un inizio o una fine di forma sbagliata.

Considerazioni di prestazioni

Le timing function cubic-bezier personalizzate costano essenzialmente niente a runtime, la curva è una costante, i browser pre-calcolano la lookup table una volta e la valutazione per frame è un paio di operazioni in virgola mobile. La domanda di prestazioni è quale proprietà animi, non la curva di timing. Animare transform (translate, scale, rotate) e opacity usa il compositing GPU e resta fluido a 60 o 120 fps anche su hardware di fascia media. Animare top, left, width, height, margin, padding o qualsiasi proprietà che inneschi il layout farà jank su qualsiasi cosa tranne le pagine più semplici perché ogni frame innesca un reflow completo. La lista delle proprietà "compositor-friendly" (transform + opacity, più filter e poche altre) è il set sicuro abituale; tutto il resto deve essere testato sotto il caricamento effettivo della pagina. La proprietà CSS will-change suggerisce al browser che una proprietà animerà, lasciandogli pre-promuovere l'elemento al proprio livello di compositing; usalo con parsimonia perché ogni will-change riserva memoria GPU.

Accessibilità: prefers-reduced-motion

Una minoranza significativa di utenti, quelli con disturbi vestibolari, condizioni di deficit di attenzione o semplice preferenza personale, trova il design del movimento distraente o attivamente scomodo. La spec CSS Media Queries Level 5 definisce la media feature prefers-reduced-motion, esposta come impostazione di sistema su macOS (Impostazioni di sistema → Accessibilità → Display → Riduci movimento), Windows 10+ (Impostazioni → Accessibilità → Display), iOS, Android e la maggior parte dei desktop Linux principali. La convenzione dal 2019 circa: avvolgere qualsiasi animazione non essenziale in @media (prefers-reduced-motion: no-preference) { ... } o invertire con @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }. La scelta della curva cubic-bezier non conta per questo, la spec chiede allo sviluppatore di disabilitare o accorciare sostanzialmente l'animazione quando l'utente ha espresso la preferenza. La documentazione moderna dei design system (Material, Atlassian, GOV.UK) include tutta linee guida per il movimento ridotto.

Fisica delle molle, l'alternativa più recente

Le timing function cubic-bezier descrivono il movimento come un'interpolazione a durata fissa lungo una curva tarata a mano. La fisica delle molle descrive il movimento come l'assestamento naturale di un oscillatore armonico smorzato: specifichi massa, rigidità e smorzamento, e l'animazione gira finché la molla è a riposo. Le molle si sentono più naturali per gesti UI interrompibili perché hanno momento che porta attraverso le interruzioni, rilasciando un gesto di scatto a metà volo, la molla continua verso la sua destinazione su una nuova curva invece di scattare. iOS di Apple usa la fisica delle molle per la maggior parte delle interazioni native (il rimbalzo di una scroll view al bordo, l'effetto rubber-band di uno swipe). React Spring (Paul Henschel), Framer Motion e la funzione di easing CSS linear() (quando alimentata con una curva di molla campionata) portano la semantica delle molle al web. Le cubic-bezier restano lo strumento giusto per transizioni UI a durata fissa; le molle sono lo strumento giusto per il movimento gesture-driven, interrompibile. Questo editor produce cubic-bezier, la forma giusta per il 90% del lavoro di animazione UI nel 2026.

Quando ti servirà questo strumento

• Progettare una nuova animazione a sensazione. Trascina i punti di controllo finché la pallina di anteprima si muove come vuoi, poi copia la CSS. Più veloce che digitare quattro numeri e ricaricare la pagina.
• Abbinare un'animazione di un altro prodotto. Reverse-engineering del timing di un'animazione che hai visto altrove regolando finché l'anteprima non corrisponde al tuo ricordo.
• Costruire una libreria di motion del brand. Stabilizzati su tre o quattro cubic-bezier specifiche per "veloce", "morbido", "enfatico", "rimbalzo" e applicale coerentemente attraverso il prodotto.
• Rivedere la spec di animazione di un designer. Incolla i valori cubic-bezier da una motion spec di Figma, vedi se la curva produce il movimento che il designer ha descritto.
• Handoff tra ingegnere e designer. Un designer trascina la curva giusta in questo strumento, copia la CSS e la incolla in un messaggio Slack, segnale molto più alto di un vago "rendi più rimbalzante".

Domande frequenti

Cosa rappresentano i valori?

I valori (x1, y1, x2, y2) definiscono due punti di controllo. I valori X devono essere compresi tra 0 e 1 (tempo), mentre i valori Y possono superare questo intervallo per effetti di overshoot/rimbalzo.

Quale curva cubic-bezier usa CSS per default?

Per le transizioni CSS (transition: opacity 300ms;) il default è ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1): partenza veloce, fine lenta. Per le animazioni CSS (animation: foo 1s;) anche il default è ease. Sovrascrivi con transition-timing-function o animation-timing-function. Per la maggior parte del movimento UI la variante ease-out o una curva decelerata in stile Material produce risultati che si sentono meglio del default.

Come faccio un effetto bouncy o di overshoot?

Spingi y2 sopra 1 (valori tipici 1,2-1,6) così che la curva ecceda brevemente la destinazione prima di assestarsi. Un rimbalzo sottile comune è cubic-bezier(0.34, 1.56, 0.64, 1). Per rimbalzi pronunciati vorrai spring-physics o animazioni multi-keyframe piuttosto che una singola cubic-bezier: le curve di Bézier possono avere un solo picco, quindi un vero rimbalzo (oscillazioni multiple) richiede keyframe a passi intermedi.

Le curve custom sono più lente delle keyword named?

No: le keyword named sono alias per specifiche cubic-bezier, valutate dallo stesso percorso di codice. Le prestazioni dipendono dalla proprietà che animi (transform/opacity = GPU-composited e veloci; proprietà che influenzano il layout come top/left/width = lente per via del reflow), non dalla curva di timing. Il costo di valutazione della cubic-bezier è trascurabile.

Questo strumento funziona offline?

Sì: il canvas della curva, l'animazione di anteprima della pallina e la generazione del codice CSS girano tutti interamente nel tuo browser tramite JavaScript. Nessuna chiamata di rete durante l'uso. Metti la pagina offline (modalità aereo) dopo che si è caricata e l'editor continua a funzionare. Nessuna telemetria; i valori di curva su cui ti decidi non lasciano mai il tuo dispositivo.

Strumenti correlati