Generator Animacji CSS
Twórz animacje CSS z 16 presetami. Dostosuj czas trwania i uzyskaj gotowy kod.
Właściwości animacji
Kod CSS
Generator Animacji CSS
Generuj animacje CSS natychmiast z naszym wizualnym builderem. 16 wbudowanych presetów.
Popularne narzędzia
O Generatorze Animacji CSS
Szesnaście gotowych efektów keyframes, wśród nich bounce, shake, pulse, fade, slide, rotate, flip, swing, rubber band, jello, heartbeat, flash i zoom, dostrajasz tutaj suwakami i listami: czas trwania, opóźnienie, liczba powtórzeń, kierunek, funkcja czasowa i tryb wypełnienia. Kwadrat podglądu odtwarza efekt od nowa przy każdej zmianie wartości. W panelu wyniku znajdziesz pełną regułę @keyframes oraz skrót animation z Twoją własną nazwą animacji, gotowy do wklejenia do arkusza stylów.
Przypadki użycia
Jak używać
Wybierz efekt z siatki gotowych ustawień u góry: Bounce, Shake, Pulse, Fade In, Slide In Left, Rotate, Flip, Swing, Jello, Heart Beat, Zoom In i wiele innych.
Zobacz, jak fioletowy kwadrat w panelu podglądu odtwarza efekt, a następnie suwakami Duration i Delay ustaw czas trwania i opóźnienie w sekundach.
Wybierz Iteration Count o wartości 1, 2, 3, 5 lub Infinite oraz Direction: Normal, Reverse, Alternate albo Alternate Reverse.
Ustaw Timing Function - Ease, Ease In, Ease Out, Ease In Out, Linear, Step Start lub Step End - oraz Fill Mode: None, Forwards, Backwards albo Both.
Zmień nazwę klatek kluczowych w polu Animation Name, aby reguła nie kolidowała z kodem CSS, który już masz na stronie.
Skopiuj jednolinijkowy zapis skrócony pokazany nad panelem kodu albo naciśnij Copy, aby pobrać pełny blok @keyframes wraz z regułą .animated-element.
Porady Pro
- Wklej treść bezpośrednio — Generator animacji CSS rozpoznaje typowe formaty danych wejściowych i sam dobiera sensowne ustawienia.
- Korzystaj ze skrótów klawiszowych (Ctrl/Cmd+A zaznacza wszystko, Ctrl/Cmd+C kopiuje), aby przyspieszyć pracę w narzędziu Generator animacji CSS.
- Bardzo duże dane dziel na mniejsze części — większość kart przeglądarki poradzi sobie z megabajtami tekstu, ale przetwarzanie ogromnych porcji może na chwilę zablokować interfejs.
- Generator animacji CSS nie zapisuje ani nie rejestruje Twoich danych. Jeśli potrzebujesz historii, kopiuj ważne wyniki do pliku lokalnego lub aplikacji z notatkami.
- Połącz Generator animacji CSS z innymi narzędziami na tej stronie (formatery, konwertery, kodery), aby zbudować kompletny proces obróbki danych bez opuszczania przeglądarki.
Często zadawane pytania
Tak, w pełni za darmo — bez rejestracji, bez klucza API, bez znaków wodnych i bez limitów użycia.
Nie. Generator animacji CSS działa w całości po stronie klienta, w Twojej przeglądarce. Twoje dane nigdy nie trafiają na nasze serwery.
Nie ma sztywnego limitu, ale przy danych większych niż kilka megabajtów licz się ze spowolnieniem — wszystko zależy od pamięci Twojego urządzenia.
Tak. Wyniki uzyskane w narzędziu Generator animacji CSS należą do Ciebie i możesz z nich swobodnie korzystać w dowolnym projekcie prywatnym lub komercyjnym.
Większość logiki działa w JavaScripcie po stronie przeglądarki, więc po pierwszym załadowaniu strony zwykle można pracować dalej bez połączenia z siecią.
Nie ma żadnych. Ponieważ Generator animacji CSS działa w Twojej przeglądarce, możesz przetworzyć tyle danych, na ile pozwala Twój sprzęt — bez kluczy API i bez ograniczeń.