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 се само фиксни cubic-bezier криви, па изборот на некоја од тие претпоставки ви ја покажува точната вредност зад клучниот збор.
Може ли да направи ефект на отскокнување или еластичност?
Не самостојно. Еден cubic-bezier може да направи исчекор наназад и пречекорување — претпоставките „back“ повлекуваат една рачка надвор од рамката токму за тоа — но може да се движи само во една насока и потоа да се смири. Ефектите на отскокнување (bounce) и еластичност ја менуваат насоката неколку пати, што ниту еден поединечен cubic-bezier не може да го изрази; за нив се потребни CSS клучни кадри (keyframes) или функцијата linear() со повеќе точки.