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

@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;
  }
}

class name: my-bounce key name: anim_my-bounce

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.