CSS Cubic Bezier Generator

Takardun Cubic Bezier

Menene Cubic Bezier Curve?

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.

CSS Sintax

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

Abubuwan Amfani da Jama'a

Canje-canje masu rai:Ƙirƙirar raye-raye masu santsi don abubuwan canza kaddarorin.
Tasirin Gungurawa:Sarrafa saurin raye-rayen gungurawa.
Abubuwan Sadarwa:Ƙayyade yadda abubuwa ke amsa hulɗar masu amfani kamar shawagi ko dannawa.
Tsarin Motsi:Sana'a hadadden jerin motsi don abubuwan UI.

Shahararrun Ayyukan Sauƙaƙe

Ease (default)

Yana farawa a hankali, yana sauri da sauri, sannan kuma yana raguwa.

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

Linear

Matsakaicin gudun daga farko zuwa ƙarshe.

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

Ease-in

Yana farawa a hankali, sannan yana hanzari.

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

Ease-out

Yana farawa da sauri, sannan raguwa.

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

Nasihu don Ƙirƙirar Ƙwararrun Ƙwaƙwalwa

Rike darajar x tsakanin 0 da 1:Ƙimar da ke wajen wannan kewayon na iya haifar da halayen da ba zato ba tsammani.
Yi tunanin lanƙwasa:Yi amfani da jadawali mai mu'amala don fahimtar yadda canje-canje ke shafar motsin rai.
Gwada tare da ainihin abubuwa:Koyaushe yin samfoti tare da ainihin abubuwan UI don tabbatar da yana jin daidai.
Ajiye saitattu:Alama masu lanƙwasa masu amfani don ayyukan gaba.