Generator keyframes CSS
Konwertuj kroki percent;property:value na blok @keyframes i skróconą notację animacji.
Generator keyframes CSS
Wklej kroki keyframe jako percent;property:value — jeden wiersz na jeden punkt, na przykład 0;opacity:0 następnie 100;opacity:1 — a narzędzie połączy je w pełny blok @keyframes i odpowiednią skróconą notację animacji. Dodaj na jeden wiersz wiele par property:value oddzielonych średnikami i animuj wiele właściwości naraz, lub ponownie użyj procent na kilku wierszach aby dodać do nich nowe właściwości.
Wybierz predefiniowaną animację — zanikanie, przesunięcie, puls, drżenie lub odbicie — i pomiń ręczne wprowadzanie kroków, lub przełącz się na niestandardowe i steruj całym procesem własnym wejściem. Pozostałe opcje tworzą skróconą notację animacji: nazwa ustawia identyfikator współdzielony przez regułę @keyframes i deklarację animacji, czas trwania i opóźnienie są w sekundach, a funkcja przejścia obejmuje wszystkie słowa kluczowe oraz niestandardową krzywą Beziera na dokładny przebieg easing. Ustaw animację na powtarzanie określoną liczbę razy lub włącz nieskończony tryb, wybierz kierunek (normalny, odwrotny, naprzemienny, naprzemienny odwrotny) i tryb wypełnienia określający co się dzieje przed i po uruchomieniu, oraz włącz opcję przedrostka webkit aby wygenerować blok @-webkit-keyframes i wiersz -webkit-animation dla starszych wersji Safari i Android WebView.
Wartości procentowe poza zakresem 0–100 są ograniczane, "from" i "to" są akceptowane jako aliasy dla 0 i 100, a puste lub nieprawidłowe wiersze są pomijane zamiast psepsuć wyjście. Licznik pod wynikiem podaje liczbę wygenerowanych keyframe'ów i dokładną liczbę znaków.
Wszystko działa lokalnie w twojej przeglądarce podczas pisania — żaden kod CSS ani dane animacji nigdy nie opuszczają urządzenia. Skopiuj wynik, pobierz go jako plik .txt, lub wyślij wyjście z powrotem do wejścia i kontynuuj udoskonalanie kroków.