Generátor kriviek cubic-bezier – CSS prechody
Generátor kriviek cubic-bezier vám umožňuje navrhnúť krivky plynulosti CSS ťahaním dvoch kontrolných bodov alebo začatím od predvoľby ako ease, ease-in-out alebo back. Nastavte dĺžku trvania, aby ste si animáciu prezreli naživo, potom skopírujte hodnotu cubic-bezier() alebo úryvok pripravený na použitie pre CSS prechod. Ladenie pohybu je vďaka tomu vizuálnejšie než samotná úprava hodnôt krivky.
Generátor kriviek cubic-bezier je vizuálny editor na vytváranie kriviek plynulosti CSS. Namiesto odvodzovania krivky z čísel môžete potiahnuť jej dva kontrolné body a vidieť, ako sa pohyb mení. Vyberte štandardnú predvoľbu, ako sú ease, ease-in-out alebo back, potom nastavte dĺžku trvania a sledujte živý náhľad animácie.
Krivka je reprezentovaná ako hodnota CSS cubic-bezier() a nástroj môže poskytnúť aj pripravený úryvok prechodu. Začnite s jednou zo štandardných predvolieb plynulosti alebo upravte kontrolné body, aby ste vytvarovali vlastnú krivku; nastavenie dĺžky trvania riadi načasovanie použité v náhľade. Skopírujte výsledok, ktorý vyhovuje vašej šablóne štýlov alebo pracovnému postupu.
Hodnota cubic-bezier() opisuje načasovanie plynulosti, zatiaľ čo deklarácia CSS prechodu môže zahŕňať túto plynulosť spolu s dĺžkou trvania. Generátor poskytuje hodnotu krivky aj pripravený úryvok prechodu, takže môžete skopírovať úroveň detailu CSS, ktorú potrebujete. Vizuálny náhľad môže uľahčiť porovnanie pohybu než úprava hodnôt krivky bez zobrazenia výsledku.
Generátor kriviek cubic-bezier funguje úplne vo vašom prehliadači. Váš vstup sa spracúva na vašom zariadení a nenahráva sa, neukladá ani neodosiela na server. Funguje offline, akonáhle sa stránka načíta, a nástroj je zadarmo.
Tento nástroj môže vývojárom a DevOps inžinierom pomôcť pripraviť hodnoty plynulosti pre rozhrania, testy, fixtúry alebo seed dáta. Či už sa učíte, ako funguje plynulosť CSS, alebo dolaďujete existujúcu interakciu, môžete upraviť krivku, prezrieť si ju a skopírovať výsledok.
Krok 1: Vyberte štandardnú predvoľbu plynulosti, ako sú ease, ease-in-out alebo back, aby ste začali s krivkou.
Krok 2: Potiahnite dva kontrolné body, aby ste krivku vizuálne upravili a vytvarovali požadovaný pohyb.
Krok 3: Nastavte dĺžku trvania a potom sledujte živý náhľad, aby ste videli, ako sa krivka animuje.
Krok 4: Skopírujte vygenerovanú hodnotu cubic-bezier() alebo úryvok pripravený na použitie pre CSS prechod.
Prípad použitia: Vytvorte hodnotu cubic-bezier() pre testovacie prípady, fixtúry alebo seed dáta, keď projekt potrebuje konkrétnu krivku plynulosti.
Prípad použitia: Vygenerujte dávku hodnôt, keď potrebujete niekoľko kriviek naraz, namiesto vymýšľania každej hodnoty ručne.
Prípad použitia: Použite správne náhodné hodnoty namiesto tipov z klávesnice, keď potrebujete náhodné dáta krivky.
Prípad použitia: Vyladite CSS prechod vizuálne úpravou kontrolných bodov a náhľadom, ako pohyb pôsobí.
Prípad použitia: Porovnajte štandardnú predvoľbu, ako sú ease alebo ease-in-out, s prispôsobenou krivkou, skôr než ju skopírujete do šablóny štýlov.
Prípad použitia: Nastavte dĺžku trvania a prezrite si animáciu, aby ste skontrolovali načasovanie interakcie rozhrania.