CSS Cubic Bezier Generator

Documentație Cubic Bezier

Ce este o curbă Bezier cubică?

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.

Sintaxa CSS

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

Cazuri comune de utilizare

Tranziții animate:Creați animații netede pentru elementele care își schimbă proprietățile.
Efecte de derulare:Controlați viteza animațiilor de derulare.
Elemente interactive:Definiți modul în care elementele răspund la interacțiunile utilizatorului, cum ar fi trecerea cu mouse-ul sau clicul.
Design de mișcare:Creați secvențe de mișcare complexe pentru elementele interfeței de utilizare.

Funcții populare de relaxare

Ease (default)

Începe încet, accelerează rapid și apoi încetinește din nou.

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

Linear

Viteză constantă de la început până la sfârșit.

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

Ease-in

Începe încet, apoi accelerează.

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

Ease-out

Începe repede, apoi decelerează.

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

Sfaturi pentru crearea curbelor personalizate

Păstrați x valori între 0 și 1:Valorile din afara acestui interval pot provoca un comportament neașteptat.
Vizualizați curba:Utilizați graficul interactiv pentru a înțelege modul în care modificările afectează animația.
Testați cu elemente reale:Previzualizați întotdeauna curba cu componentele reale ale interfeței de utilizare pentru a vă asigura că se simte bine.
Salvați presetările:Marcați curbe utile pentru proiecte viitoare.