CSS Kubu Bezier Ġeneratur

Dokumentazzjoni ta 'Cubic Bezier

X'inhi Kurva Kubika ta 'Bezier?

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);

Każijiet ta 'Użu Komuni

Tranżizzjonijiet Animati:Oħloq animazzjonijiet bla xkiel għall-elementi li jbiddlu l-proprjetajiet.
Effetti ta 'l-Iscroll:Ikkontrolla l-veloċità tal-animazzjonijiet tal-iscroll.
Elementi Interattivi:Iddefinixxi kif l-elementi jirrispondu għall-interazzjonijiet tal-utent bħal hovering jew klikk.
Disinn tal-Mozzjoni:Craft sekwenzi ta 'moviment kumplessi għal elementi UI.

Funzjonijiet ta 'Tħaffif Popolari

Ease (default)

Jibda bil-mod, jaċċellera malajr, u mbagħad jerġa' jnaqqas ir-ritmu.

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

Linear

Veloċità kostanti mill-bidu sat-tmiem.

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

Ease-in

Jibda bil-mod, imbagħad jaċċellera.

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

Ease-out

Jibda malajr, imbagħad inaqqas.

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

Ħjiel għall-Ħolqien ta 'Kurvi tad-Dwana

Żomm il-valuri x bejn 0 u 1:Valuri barra minn din il-medda jistgħu jikkawżaw imġieba mhux mistennija.
Viżwalizza l-kurva:Uża l-graff interattiv biex tifhem kif il-bidliet jaffettwaw l-animazzjoni.
Test b'elementi reali:Dejjem ipprevedi l-kurva tiegħek b'komponenti UI attwali biex tiżgura li tħossha tajjeb.
Issejvja l-issettjar minn qabel:Bookmark kurvi utli għal proġetti futuri.