Generator animacji CSS

Twórz animacje CSS wizualnie. Ustaw keyframes, czas i krzywą ruchu, zobacz podgląd i skopiuj gotowy kod @keyframes — za darmo online.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Animacja

Kierunek

Tryb wypełnienia

Nazwa klasy

Czas trwania

Opóźnienie

Liczba powtórzeń

Funkcja czasowa

Prefiksy przeglądarek Opcja narzędzia

Ograniczenie ruchu (reduced motion) Opcja narzędzia

CSS

Wynik

Klasa CSS

.my-bounce

Nazwa @keyframes

anim_my-bounce

Czas trwania

0.9s

animation-duration

Funkcja czasowa

ease-in-out

animation-timing-function

Opóźnienie

animation-delay

Powtórzenia

animation-iteration-count

@keyframes anim_my-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.my-bounce {
  animation-name: anim_my-bounce;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .my-bounce {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
  }
}

Ściąga: właściwości animation-* w generowanym CSS (zgodnie z silnikiem narzędzia)

Silnik emituje blok @keyframes i klasę z siedmioma właściwościami — każda odpowiada jednemu polu formularza.

Właściwość CSS	Co robi	Pole w narzędziu
`animation-name`	podpina zestaw klatek @@keyframes (tu: anim_ + nazwa klasy)	wyznaczana automatycznie z „Nazwa klasy”
`animation-duration`	czas jednego pełnego cyklu animacji	„Czas trwania”, np. 0.9s
`animation-timing-function`	tempo między klatkami (krzywa czasowa)	„Funkcja czasowa”, np. ease-in-out
`animation-delay`	opóźnienie startu animacji	„Opóźnienie”, np. 0s
`animation-iteration-count`	liczba powtórzeń (liczba lub infinite)	„Liczba powtórzeń”
`animation-direction`	kierunek odtwarzania cykli	„Kierunek”: normal / reverse / alternate / alternate-reverse
`animation-fill-mode`	co dzieje się z elementem przed i po animacji	„Tryb wypełnienia”: none / forwards / backwards / both

Opcja „Prefiksy przeglądarek” dubluje wszystkie właściwości z prefiksem -webkit-, a opcja „Ograniczenie ruchu” dopisuje blok @media(prefers-reduced-motion: reduce) z animation-duration: 0.001ms i animation-iteration-count: 1 — dokładnie te wartości trafiają do wygenerowanego kodu.

Ściąga: funkcje czasowe (animation-timing-function)

Wartość	Charakter ruchu
`linear`	stała prędkość od początku do końca — mechanicznie, jak tarcza zegara
`ease`	szybki start, wyhamowanie przy końcu; domyślna wartość CSS
`ease-in`	wolny start, przyspiesza ku końcowi — jak rozpędzający się obiekt
`ease-out`	szybki start, łagodne wyhamowanie — naturalne dla elementów wjeżdżających na ekran
`ease-in-out`	wolny start i koniec, przyspieszenie w środku — domyślna wartość tego generatora
`cubic-bezier(x1, y1, x2, y2)`	własna krzywa Béziera; x w zakresie 0–1, y może wykraczać poza (efekt przeskoku) — wpisz ją wprost w polu „Funkcja czasowa”

Pole przyjmuje dowolną poprawną wartość CSS do 40 znaków — narzędzie wstawia ją 1:1 do animation-timing-function, więc krzywe cubic-bezier też działają.

Animacje a prefers-reduced-motion — co warto wiedzieć

Szanuj ograniczenie ruchu

Użytkownicy z zaburzeniami przedsionkowymi włączają w systemie „ogranicz ruch”. Checkbox w narzędziu dopisuje media query prefers-reduced-motion: reduce, która skraca animację do 0,001 ms i jednej iteracji — interakcja działa, ale nie mrozi ruchu. Zostawiaj tę opcję włączoną w kodzie produkcyjnym.

Animuj transform i opacity

Wszystkie klatki silnika używają wyłącznie transform i opacity — właściwości animowanych na kompozytorze GPU, bez przeliczania layoutu. Animowanie szerokości, wysokości czy top wymusza reflow przy każdej klatce i zamula strony na słabszych telefonach.

Infinite z głową

Nieskończone animacje (pulse, rotate) przyciągają wzrok, ale rozpraszają, zużywają baterię i potrafią zacierać tekst. Jeśli pętla musi być nieskończona, rozważ alternate — animacja wraca płynnie zamiast „skakać” do klatki startowej.

Fill-mode ratuje wejścia

Animacja fade-in z fill-mode: both nie mignie pustym elementem przed startem (opóźnienie) ani nie cofnie się po zakończeniu. Bez fill-mode element po animacji wraca do stylów bazowych — częsta przyczyna „migania” interfejsu po wdrożeniu.

Wskazówka: podgląd nad wynikiem odtwarza animację dokładnie tym wygenerowanym CSS, a kafelki pokazują czas trwania, funkcję czasową i liczbę powtórzeń wprost z formularza.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator animacji CSS — twórz dynamiczne i płynne efekty na stronie

Animacje na stronie internetowej przyciągają uwagę użytkowników, poprawiają doświadczenie (UX) oraz nadają witrynie nowoczesny charakter. Nasz zaawansowany generator animacji CSS pozwala na projektowanie płynnych efekty ruchu, obrotów, skalowania i przechodzenia bez konieczności ręcznego pisania skomplikowanego kodu.

Podstawy animacji w CSS: reguła @keyframes i właściwość nadrzędna animation

Tworzenie animacji w CSS opiera się na dwóch głównych elementach: zdefiniowaniu klatek kluczowych za pomocą reguły @keyframes oraz przypisaniu tej animacji do konkretnego elementu HTML za pomocą właściwości animation. Reguła @keyframes opisuje, jak element ma wyglądać w poszczególnych momentach trwania animacji (np. na początku przy 0%, w połowie przy 50% i na końcu przy 100%).

Z kolei właściwość animation w arkuszu stylów określa parametry odtwarzania tej animacji na danym elemencie. Ręczne pisanie tych reguł bywa czasochłonne i wymaga pamiętania o wielu szczegółach składniowych. Nasz generator automatyzuje ten proces, tworząc zarówno kompletny blok @keyframes, jak i gotową klasę CSS z odpowiednio skonfigurowanymi właściwościami.

Kluczowe parametry animacji: duration, timing-function, delay i iteration-count

Aby animacja wyglądała naturalnie, musimy precyzyjnie skonfigurować jej parametry. animation-duration określa czas trwania jednego cyklu animacji (w sekundach lub milisekundach). Niezwykle ważna jest również funkcja tempa animation-timing-function, która decyduje o przyspieszaniu i zwalnianiu animacji (np. ease-in, ease-out, linear czy niestandardowe krzywe cubic-bezier).

Opóźnienie rozpoczęcia animacji definiuje właściwość animation-delay, a liczba powtórzeń to animation-iteration-count (może być liczbą lub mieć wartość infinite dla animacji zapętlonych w nieskończoność). Nasz generator pozwala na interaktywne dostosowanie wszystkich tych parametrów za pomocą prostych suwaków i natychmiastowy podgląd efektu.

Zastosowanie transformacji (transform: translate, scale, rotate) w płynnych animacjach

Najlepsze efekty wizualne i najwyższą wydajność osiąga się, animując właściwości geometryczne za pomocą transform. Pozwala to na przemieszczanie elementu (translate), zmianę jego rozmiaru (scale), obracanie (rotate) oraz pochylanie (skew) w przestrzeni dwu- i trójwymiarowej.

Ponieważ transformacje są renderowane przez kartę graficzną (GPU) z pominięciem etapów Layout i Paint w przeglądarce, animacje te działają niezwykle płynnie i nie powodują zacinania się strony (tzw. jank). Generator animacji CSS domyślnie korzysta z tych dobrych praktyk, oferując gotowe szablony efektów bazujące na transformacjach.

Optymalizacja animacji CSS pod kątem wydajności i urządzeń mobilnych

Choć animacje CSS są znacznie bardziej wydajne niż te pisane w JavaScript, niewłaściwe korzystanie z nich może prowadzić do nadmiernego zużycia baterii i spowolnienia urządzeń mobilnych. Należy unikać animowania właściwości takich jak width, height, margin czy top i left, ponieważ zmuszają one przeglądarkę do ponownego przeliczania układu całej strony.

Zamiast tego należy zawsze preferować transform oraz opacity. Dodatkowo pomocna bywa właściwość will-change, która informuje przeglądarkę o planowanej animacji elementu, pozwalając na jej wcześniejszą optymalizację. Korzystając z wygenerowanego przez nas kodu, masz pewność, że animacje będą działać sprawnie na każdym urządzeniu mobilnym i stacjonarnym.

Najczęściej zadawane pytania

Czym różni się CSS Transition od CSS Animation?

Transition wymaga zewnętrznego wyzwalacza (np. najechania myszką) i płynnie przechodzi między dwoma stanami. Animation uruchamia się automatycznie i pozwala na tworzenie złożonych klatek kluczowych @keyframes o wielu etapach.

Co to jest timing-function i jak działa cubic-bezier?

Timing-function określa tempo zmian w czasie. Cubic-bezier to matematyczna funkcja opisująca krzywą prędkości, dzięki której można tworzyć realistyczne efekty, takie jak odbijanie czy gwałtowne przyspieszanie.

Jak stworzyć zapętloną animację w CSS?

Aby animacja powtarzała się bez końca, należy ustawić właściwość animation-iteration-count na wartość infinite. Sprawi to, że cykl animacji będzie odtwarzany w pętli.

Czy animacje CSS obciążają procesor urządzenia użytkownika?

Większość nowoczesnych animacji korzystających z transform oraz opacity jest akcelerowana sprzętowo przez kartę graficzną (GPU), co minimalizuje obciążenie procesora (CPU) i oszczędza baterię.

Jak uruchomić animację CSS dopiero po najechaniu myszką (hover)?

Można przypisać właściwość animation bezpośrednio do stanu :hover w CSS lub sterować klasami za pomocą prostego kodu JavaScript, który dodaje klasę animacji po wystąpieniu zdarzenia.