Generator animacji i przejść CSS
Utwórz regułę przejścia CSS z predefiniowanych krzywych lub niestandardowych punktów cubic-bezier z tekstowym wykresem ruchu.
Generator animacji i przejść CSS
Wybierz właściwości, które chcesz animować, ustaw czas trwania i opóźnienie, a narzędzie napisze dla ciebie regułę przejścia — jako czysty CSS lub blok konfiguracyjny Tailwind, który możesz wkleić bezpośrednio do tailwind.config.js. Narzędzie obejmuje popularne nazwane krzywe (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, krzywą, która przesunięcia się poza cel przed ustaleniem, która nie jest natywnym słowem kluczowym CSS i zawsze musi być zapisana jako pełna funkcja cubic-bezier().
Poniżej wygenerowanej reguły znajduje się tekstowy wykres, który przedstawia postęp krzywej w każdym punkcie w czasie — od 0 na początek animacji do 1 na koniec, z paskiem dla każdej próbki, aby zobaczyć przyspieszenie i ewentualną przesunięcie bez otwierania narzędzi programistycznych. Przełącz na "Niestandardowy cubic-bezier()" i wprowadź własne cztery punkty kontrolne, aby zobaczyć podgląd krzywej, którą ktoś ci dał, lub którą skopiowałeś z narzędzia projektowego; pierwszy i trzeci punkt muszą pozostać w zakresie 0–1 na osi czasu (to jest wymóg CSS), ale wartości y mogą wychodzić poza zakres 0–1, co stanowi dokładnie to, jak działają animacje bounce i back.
Pole właściwości przyjmuje listę rozdzielaną przecinkami — transform, opacity, background-color lub właściwość CSS, taką jak --panel-width — i narzędzie napisze jeden wiersz na właściwość, aby reguła była łatwa do czytania. Czas trwania i opóźnienie są w milisekundach; liczba wierszy wykresu można dostosować od 2 do 41, aby uzyskać bardziej grubą lub dokładną lekturę krzywej.
Wszystko działa lokalnie w twojej przeglądarce: nic, co wpiszesz, nie jest wysyłane nigdzie. Skopiuj wynik, pobierz jako plik .txt lub wyślij wynik z powrotem do danych wejściowych w celu dalszych zmian.