Generatore di Bezier cubico CSS

Documentazione di Cubic Bezier

Che cos'è una curva di Bézier cubica?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Sintassi CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Casi d'uso comuni

Transizioni animate:Crea animazioni fluide per gli elementi che modificano le proprietà.
Effetti di scorrimento:Controlla la velocità delle animazioni di scorrimento.
Elementi interattivi:Definisci il modo in cui gli elementi rispondono alle interazioni dell'utente, come il passaggio del mouse o il clic.
Design del movimento:Crea sequenze di movimento complesse per gli elementi dell'interfaccia utente.

Funzioni di interpolazione popolari

Ease (default)

Inizia lentamente, accelera rapidamente e poi rallenta di nuovo.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Velocità costante dall'inizio alla fine.

cubic-bezier(0, 0, 1, 1)

Ease-in

Inizia lentamente, poi accelera.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Si avvia velocemente, poi decelera.

cubic-bezier(0, 0, 0.58, 1)

Suggerimenti per la creazione di curve personalizzate

Mantieni i valori x compresi tra 0 e 1:I valori al di fuori di questo intervallo possono causare un comportamento imprevisto.
Visualizza la curva:Utilizza il grafico interattivo per capire in che modo le modifiche influiscono sull'animazione.
Test con elementi reali:Visualizza sempre l'anteprima della curva con i componenti effettivi dell'interfaccia utente per assicurarti che sia corretta.
Salva i predefiniti:Contrassegna le curve utili per i progetti futuri.