Cubic Bezier Generátor
Tervezz egyéni CSS cubic-bezier() időzítési függvényt két vezérlőpont húzásával, tekintsd meg élőben egy lineáris referenciához viszonyítva, majd másold ki a kész értéket.
🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.
Eredmény
Kézzel beírni a cubic-bezier(x1, y1, x2, y2) értéket, majd újratölteni az oldalt az érzet ellenőrzéséhez, lassú módja egy animáció hangolásának. Ez a generátor lerövidíti ezt a kört: húzd bármelyik vezérlőpont fogantyúját a görbén, vagy írj be pontos számokat az x1/y1/x2/y2 mezőkbe, és a görbe, a másolható CSS karakterlánc és az élő animációs előnézet minden változtatásra frissül – nincs szükség build lépésre, nincs újratöltés.
A két tengely szándékosan eltérően működik. Az x1 és x2 0 és 1 között rögzített, mert a CSS specifikáció ezt követeli meg a cubic-bezier() időzítési függvénytől – az ezen a tartományon kívüli érték egyszerűen érvénytelen. Az y1-re és y2-re nincs ilyen korlátozás: húzz egy fogantyút a doboz teteje fölé vagy az alja alá, és a görbe túllendül a kezdő- vagy végpontján, pontosan így épülnek fel a rugós és pattogó hatások egyetlen easing görbéből.
Egy számot látni nem ugyanaz, mint a mozgást látni, ezért az előnézet két egyforma golyót futtat egymás mellett, ismétlődve: az egyik az egyéni görbéd szerint mozog, a másik sima, állandó lineáris tempóban. Ahogy versenyeznek, ez a leggyorsabb módja annak, hogy megállapítsd, az easing görbe valóban azt az érzetet kelti-e, amit szeretnél, még mielőtt egy stíluslapba kerülne. Az előre beállított oldalak – a CSS saját ease-in-out kulcsszava mögötti valós számok, egy őszinte túllövési közelítés, amit egyesek pattogásnak hívnak, és a Google által publikált Material Design szabványos görbe – kész kiindulópontok, ahonnan húzással indulhatsz, üres vezérlőpontok helyett.
Minden helyben, a böngésződben fut: nincs feltöltés, nincs fiók, nincs szerveroldali forduló, és a generátor offline is működik, miután az oldal betöltődött.