Generátor CSS animácií a prechodov
Vytvorte pravidlo CSS prechodu z nastavených kriviek alebo vlastných bodov cubic-bezier s textovým grafom pohybu.
Generátor CSS animácií a prechodov
Vyberte vlastnosti, ktoré chcete animovať, nastavte dobu trvania a oneskorenie, a tento nástroj vám napíše pravidlo prechodu — ako čistý CSS alebo ako konfiguračný blok Tailwind, ktorý môžete vložiť priamo do tailwind.config.js. Nástroj pokrýva bežné pomenované krivky (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, krivku, ktorá sa presahuje mimo svoj cieľ pred ustálením, čo nie je natívne CSS kľúčové slovo a musí sa vždy zapísať ako plná funkcia cubic-bezier().
Pod vygenerovaným pravidlom je textový graf, ktorý vykresluje pokrok krivky v každom bode v čase — od 0 na začiatku animácie po 1 na konci, s pruhom pre každú vzorku, takže vidíte zrýchlenie a akýkoľvek presah bez otvárania vývojárskych nástrojov. Prepnite na "Vlastný cubic-bezier()" a zadajte svoje vlastné štyri kontrolné body na ukážku krivky, ktorú vám niekto dal, alebo ktorú ste skopírovali z návrhárskeho nástroja; prvý a tretí bod musia zostať v rozsahu 0–1 na osi času (to je požiadavka CSS), ale hodnoty y sa môžu dostať mimo rozsah 0–1, čo je práve to, ako fungujú animácie bounce a back.
Poľo vlastnosti prijíma zoznam oddelený čiarkami — transform, opacity, background-color alebo vlastnosť CSS ako napríklad --panel-width — a nástroj napíše jeden riadok na vlastnosť, aby bolo pravidlo ľahké čítať. Trvanie a oneskorenie sú v milisekundách; počet riadkov grafu je nastaviteľný od 2 do 41 pre hrubší alebo jemnejší pohľad na krivku.
Všetko beží lokálne vo vašom prehliadači: nič, čo napíšete, sa nekopíruje nikam. Skopírujte výsledok, stiahnite ho ako súbor .txt alebo pošlite výstup priamo späť do vstupu na ďalšie úpravy.