DARMOWE NARZĘDZIE

Generator CSS Animation

Twórz animacje CSS (keyframes) wizualnie: wybierz efekt, czas trwania i easing. Kopiuj gotowy kod CSS. Bezpłatnie online. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

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

Animation

Direction

Fill mode

Class nazw

Duration

Delay

Iterations

Timing

Prefixes Opcja narzędzia

Reduce Opcja narzędzia

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

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

Generator CSS Animation online

Animacje CSS dodają życia interfejsom bez potrzeby bibliotek JavaScript. Generator tworzy kod @keyframes i właściwość animation na podstawie wizualnych ustawień.

CSS animation keyframes animacje CSS web design

Dostępne efekty

Fade (wejście/wyjście), slide (z 4 kierunków), bounce, zoom, rotate, shake, pulse, flip — i combinacje. Każdy efekt jest podglądany na żywo.

Zaawansowane opcje

Czas trwania (ms), opóźnienie, liczba powtórzeń, kierunek (normal/reverse/alternate), fill-mode, easing (ease, cubic-bezier z wizualnym edytorem).

Najczęstsze pytania

Czy animacje są kompatybilne z przeglądarkami?

Tak — CSS animations są obsługiwane przez wszystkie współczesne przeglądarki; prefix -webkit- dodawany automatycznie.

Jak zapobiec miganiu przy ładowaniu?

Użyj animation-fill-mode: both i animation-delay — element będzie w stanie końcowym przed startem animacji.

Czy mogę animować własne właściwości?

Generator obsługuje transform i opacity; dla color i background-color wpisz ręcznie dodatkowy keyframe.

Do tworzenia przejść CSS sprawdź generator CSS transition w serwisie.