Generator animacji CSS
Generator animacji CSS tworzy animacje @keyframes z 14 gotowych szablonów, takich jak fade in, slide in, bounce in, pulse, spin, shake i zoom, z kontrolą czasu trwania, funkcji czasowej i liczby powtórzeń.
O tym narzędziu
Generator animacji CSS tworzy animacje @keyframes z 14 gotowych szablonów, takich jak fade in, slide in, bounce in, pulse, spin, shake i zoom, z kontrolą czasu trwania, funkcji czasowej i liczby powtórzeń.
Jak używać
- Wybierz szablon animacji.
- Ustaw czas trwania, funkcję czasową i liczbę powtórzeń.
- Naciśnij Replay, aby zobaczyć podgląd.
- Kliknij Copy CSS, aby dostać @keyframes i regułę animation.
Warto wiedzieć
- Animacja CSS składa się z dwóch części: reguły @keyframes i właściwości animation na elemencie.
- Animowanie transform i opacity to zwykle najpłynniejszy wybór pod względem wydajności.
- Funkcje czasowe, takie jak ease-out, zaczynają szybko i zwalniają, co przy animacjach wejścia wygląda naturalnie.
- Respektuj media query prefers-reduced-motion dla użytkowników, którzy chcą mniej ruchu.
- Nieskończona liczba powtórzeń pasuje do loaderów; efekty wejścia zwykle odtwarza się raz.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak stworzyć animację CSS?
Zdefiniuj ruch w regule @keyframes, a potem podepnij go przez animation: name duration timing iteration. Generator napisze za Ciebie jedno i drugie.
Czym różnią się przejścia CSS od animacji?
Przejścia (transitions) animują zmianę między dwoma stanami, gdy zmienia się właściwość, np. przy hover. Animacje korzystają z keyframes, mogą uruchamiać się same i działać w pętli.
Jak zapętlić animację w nieskończoność?
Ustaw liczbę powtórzeń na infinite, np. animation: spin 1s linear infinite.
Czy animacje CSS wpływają na dostępność?
Duży lub ciągły ruch może przeszkadzać niektórym użytkownikom. Umieszczaj nieistotne animacje w @media (prefers-reduced-motion: no-preference).