TL
Tool Lab
💰Donate
💰Donate

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

O tym narzędziu

Generator Animacji CSS tworzy płynne animacje poprzez konfigurację presetów keyframe, czasu, czasu trwania, opóźnienia i iteracji. Podgląd na żywo pokazuje animację w działaniu.

Animacje CSS używające transform i opacity są wydajne, ponieważ są składane na GPU i nie wywołują przeliczania układu ani odświeżania.

Jak używać

  1. Wybierz typ animacji z listy rozwijanej.
  2. Ustaw czas trwania (np. 0.5s, 2s).
  3. Wybierz funkcję czasu do kontroli easingu.
  4. Opcjonalnie ustaw opóźnienie przed rozpoczęciem animacji.
  5. Ustaw liczbę iteracji (liczba lub infinite).
  6. Kliknij Odtwórz ponownie, aby zobaczyć podgląd, następnie Kopiuj, aby wyeksportować CSS.

Przypadki użycia

Deweloperzy front-end używają animacji fade i slide do poprawy postrzeganej wydajności. Projektanci UI prototypują mikro-interakcje, takie jak puls przycisku.

Często zadawane pytania

  • Co to jest fill-mode: both? — Animacja stosuje style startowe przed rozpoczęciem i zachowuje style końcowe po zakończeniu. To najczęściej przydatne ustawienie.
  • Jak sprawić, by animacja zapętlała się w nieskończoność? — Ustaw liczbę iteracji na infinite.
  • Czy animacje CSS są lepsze od JavaScript? — Do prostych efektów preferowane są animacje CSS. Do złożonego sekwencjonowania JavaScript oferuje więcej kontroli.