Przejdź do wyniku narzędzia
Narzędzia

Generator animacji CSS i klatek @keyframes

Zacznij od gotowego ruchu i zmień klatki kluczowe.

Przejdź do narzędzia

Zacznij od gotowego ruchu i zmień klatki kluczowe. Ustaw czas, tempo i powtarzanie. Podgląd możesz zatrzymać, a wynik pobrać jako CSS lub kompletny przykład HTML.

Opracowanie:
Jak działa ↓ FAQ
Spis treści

Ustawienia generatora

Dane są przetwarzane w tej karcie przeglądarki. Pobierz wynik przed jej zamknięciem.

Klatki kluczowe

Podgląd i eksport

Brak gotowego wyniku

Jeśli okno podglądu jest szersze niż ekran, przesuń je poziomo.

Ustaw parametry i utwórz wynik.

Jak działa narzędzie
  1. Wybierz punkt wyjścia: pojawianie, przesunięcie, pulsowanie albo obrót.
  2. Wpisz nazwę animacji, czas, opóźnienie, funkcję tempa i kierunek.
  3. Ustaw liczbę powtórzeń lub nieskończoną pętlę oraz zachowanie przed i po animacji.
  4. Edytuj momenty klatek i ich transformacje. Potrzebne są różne momenty oraz klatki 0% i 100%.
  5. Utwórz animację, sprawdź podgląd i użyj pauzy. Pobierz CSS lub pełny HTML z przykładowym elementem.

Szczegóły techniczne

Każda klatka zapisuje przesunięcie translate, obrót rotate, skalowanie scale oraz opacity. Klatki są sortowane według procentu. Przeglądarka interpoluje wartości między nimi zgodnie z funkcją tempa. Czas dotyczy pojedynczego przebiegu; kierunek alternate odwraca co drugi przebieg.

Eksport zawiera @keyframes, klasę elementu, klasę is-paused z animation-play-state i regułę prefers-reduced-motion. W pełnym przykładzie HTML przycisk przełącza pauzę. Sam plik CSS wymaga elementu z odpowiednią klasą; do obsługi własnego przycisku dodaj lub usuń klasę is-paused.

FAQ

Dlaczego podgląd się nie porusza?

Sprawdź systemową opcję ograniczenia animacji. Eksport respektuje prefers-reduced-motion. Sprawdź też, czy podgląd nie jest zatrzymany.

Czy pauza zaczyna ruch od początku?

Nie. Klasa is-paused zatrzymuje bieżący czas animacji. Ponowne wygenerowanie tworzy nowy podgląd od początku.

Co oznacza forwards?

Po zakończeniu animacji element zachowuje wartości ostatniej klatki zgodnie z kierunkiem przebiegu. Opcja both stosuje także zachowanie backwards podczas opóźnienia.

Ograniczenia narzędzia

Możesz ustawić 2–8 klatek, czas 0,1–20 sekund, opóźnienie 0–10 sekund i 1–20 powtórzeń lub pętlę. Zakres przesunięcia wynosi ±200 px, obrotu ±720°, skali 0,1–3, a krycia 0–1. Wersja nie edytuje dowolnych właściwości CSS ani własnych funkcji cubic-bezier.

Przy systemowej preferencji ograniczenia ruchu animacja jest wyłączona, transformacja resetowana, a element pozostaje widoczny. To samo zachowanie jest częścią eksportu. Podgląd ma wydzielony obszar i może przyciąć skrajny ruch. Płynność zależy od urządzenia i obciążenia strony. Łączny czas obejmuje powtórzenia oraz opóźnienie; pętla trwa do zatrzymania.

Źródła i aktualizacja

Umieść to narzędzie na swojej stronie

Skopiuj kod i wklej go w swoim artykule. Narzędzie zadziała na Twojej stronie, a pod nim pojawi się link do źródła. Za darmo, bez rejestracji.

Motyw:
Podgląd widgetu ↗