Генератор CSS Cubic Bezier кривих
Превуците две ручице да бисте обликовали криву анимације, упоредите кретање са константном брзином и копирајте cubic-bezier() вредност.
cubic-bezier(0.25, 0.1, 0.25, 1)Крива се исцртава директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo.
Честа питања
Шта значе две ручице и четири броја?
Крива се протеже од доњег левог угла (почетак) до горњег десног угла (крај), при чему време тече слева надесно, а напредак одоздо нагоре. Две ручице су контролне тачке које савијају криву — свака има своје X и Y координате, па заједно чине запис cubic-bezier(x1, y1, x2, y2). Координата X мора бити између 0 и 1, док Y може ићи изнад врха или испод дна како би се креирао ефекат пребачаја или повлачења уназад пре смиривања.
Како да искористим ову вредност у свом CSS-у?
Копирајте генерисану cubic-bezier() вредност и убаците је тамо где се дефинише динамика анимације — у transition-timing-function, animation-timing-function или скраћени запис, нпр. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Кључне речи попут ease, ease-in, ease-out и ease-in-out су заправо фиксне кубне Безијерове криве, па избором неког од тих шаблона можете видети тачне вредности које стоје иза њих.
Може ли се помоћу овога направити ефекат одбијања или еластичности?
Не директно. Једна кубна Безијерова крива може да направи ефекат ишчекивања или пребачаја — шаблони са ознаком „back” превлаче једну ручицу ван оквира графикона управо ради тога — али може да се креће само у једном смеру пре него што се умири. Ефекти одбијања (bounce) или еластичности захтевају промену смера више пута, што се не може описати једном кривом; за то су вам потребни CSS keyframes или функција linear() са више тачака.