In questo articolo
Cosa sono le curve di Bezier cubiche?
Una curva di Bezier cubica e una funzione matematica utilizzata in CSS per definire il timing delle animazioni e delle transizioni. Scritta come cubic-bezier(x1, y1, x2, y2), descrive come un'animazione progredisce dall'inizio alla fine mappando il tempo sul progresso lungo una curva liscia definita da quattro punti di controllo.
In CSS, la funzione cubic-bezier() controlla l'easing delle proprieta transition-timing-function e animation-timing-function. Invece del movimento lineare, consente di creare accelerazioni e decelerazioni naturali che imitano la fisica del mondo reale, rendendo le animazioni dell'interfaccia raffinate e intenzionali.
Comprendere i quattro valori di controllo
La funzione cubic-bezier() accetta quattro valori che definiscono due punti di controllo sulla curva. Questi punti di controllo modellano il modo in cui l'animazione accelera e decelera.
- X1 (0-1) — la posizione orizzontale del primo punto di controllo, che determina quando termina la fase di accelerazione iniziale
- Y1 (qualsiasi valore) — la posizione verticale del primo punto di controllo, che controlla la velocita di avvio dell'animazione. Valori superiori a 1 creano un effetto di overshoot
- X2 (0-1) — la posizione orizzontale del secondo punto di controllo, che determina quando inizia la fase di decelerazione
- Y2 (qualsiasi valore) — la posizione verticale del secondo punto di controllo, che controlla come termina l'animazione. Valori superiori a 1 creano un rimbalzo di overshoot
Prova gratuitamente — nessuna registrazione richiesta
Crea una curva di Bezier cubica →Preset di easing comuni e quando usarli
CSS fornisce diverse parole chiave di easing integrate che corrispondono a specifici valori cubic-bezier. Comprendere questi preset ti aiuta a scegliere la sensazione giusta per le tue animazioni.
- ease (0.25, 0.1, 0.25, 1.0) — il predefinito CSS, inizia rapidamente poi decelera dolcemente. Buono per la maggior parte delle transizioni generali
- ease-in (0.42, 0, 1.0, 1.0) — inizia lentamente e accelera. Migliore per elementi che lasciano lo schermo o svaniscono
- ease-out (0, 0, 0.58, 1.0) — inizia veloce e decelera. Ideale per elementi che entrano nello schermo o appaiono
- ease-in-out (0.42, 0, 0.58, 1.0) — inizio e fine lenti con mezzo veloce. Adatto per animazioni in loop o elementi che rimangono sullo schermo
- linear (0, 0, 1, 1) — velocita costante dall'inizio alla fine. Usare per barre di progresso, spinner di caricamento o transizioni di colore dove la velocita uniforme risulta naturale
Domande frequenti
Tutti i browser supportano cubic-bezier()?
Si. La funzione cubic-bezier() e supportata in tutti i principali browser dal IE 10 (2012). Fa parte delle specifiche CSS Transitions e CSS Animations, che hanno supporto completo in Chrome, Firefox, Safari, Edge e tutti i browser mobile moderni.
Si possono creare animazioni a molla o rimbalzo con cubic-bezier()?
Le curve di Bezier cubiche possono approssimare semplici effetti di rimbalzo usando valori Y maggiori di 1 (overshoot). Per esempio, cubic-bezier(0.34, 1.56, 0.64, 1) crea un leggero overshoot. Tuttavia, la vera fisica a molla con rimbalzi multipli richiede CSS spring() (non ancora ampiamente supportato) o librerie di animazione JavaScript come GSAP o Framer Motion.
Qual e la differenza tra transizioni CSS e animazioni CSS?
Le transizioni CSS animano tra due stati quando una proprieta cambia (ad esempio, al passaggio del mouse). Le animazioni CSS usano keyframes per definire sequenze a piu passaggi che possono ripetersi ed eseguirsi in modo indipendente. Entrambe usano le stesse funzioni di timing, inclusa cubic-bezier(), per controllare l'easing tra stati o keyframes.