Генератор кубних Безијерових кривих
Дизајнирајте прилагођену CSS cubic-bezier() временску функцију превлачењем две контролне тачке, уживо је упоредите са линеарном референцом и затим копирајте готову вредност.
🔒 У потпуности се обрађује у вашем претраживачу — ништа што овде унесете се никада не отпрема.
Резултат
Ручно куцање cubic-bezier(x1, y1, x2, y2) и поновно учитавање странице да бисте проверили осећај је спор начин за подешавање анимације. Овај генератор затвара ту петљу: превуците било коју ручицу контролне тачке на кривој или унесите тачне бројеве у поља x1/y1/x2/y2 и крива, CSS стринг спреман за копирање и живи преглед анимације се ажурирају при свакој промени — без корака изградње, без поновног учитавања.
Две осе раде различито с разлогом. x1 и x2 остају стегнути између 0 и 1, јер CSS спецификација то заправо захтева од cubic-bezier() временске функције — вредност изван тог опсега је једноставно невалидна. y1 и y2 немају такво ограничење: превуците ручицу изнад врха кутије или испод дна и крива премашује свој почетак или крај, што је управо начин на који се ефекти опруге и одскока граде од једне криве ублажавања.
Видети број није исто што и видети кретање, па преглед приказује две идентичне лоптице једну поред друге у петљи: једна се креће користећи вашу прилагођену криву, друга се креће обичном константном линеарном брзином. Гледање њихове трке је најбржи начин да утврдите да ли крива ублажавања заиста производи осећај који желите, пре него што уопште стигне до стилског листа. Унапред припремљене странице — прави бројеви иза саме CSS ease-in-out кључне речи, искрена апроксимација пребачаја коју неки називају одскоком и Google-ова објављена стандардна крива Material Design-а — представљају готове полазне тачке од којих можете да повлачите, уместо празних контролних тачака.
Све ради локално у вашем прегледачу: нема отпремања, нема налога, нема одласка до сервера и назад, а генератор наставља да ради офлајн након што се страница учита.