SUPER EASY UTILS

Css Animation Generator

Free online css animation generator tool. Simple, fast, and secure.

Preview

Start
Animate

Generated CSS

@keyframes my-animation {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translate(100px, 0px) scale(1.2) rotate(45deg);
    opacity: 1;
    background-color: #ec4899;
  }
}

.animated-element {
  animation: my-animation 2s ease-in-out 0s infinite normal forwards;
}

Animation Settings

2s

Start State0%

0, 0
1
0°
1
#3b82f6

End State100%

100, 0
1.2
45°
1
#ec4899
Dalej
Przeczytaj pełny przewodnik
Albo wypróbuj te
CSS Pattern GenGradient ForgéGenerator ASCII art

Polecane narzędzia

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

Tworzenie animacji CSS bez ręcznego kodowania

Overview

Animacje CSS ożywiają interfejsy — przenikanie, przesunięcia, odbicia i obroty — ale pisanie klatek kluczowych ręcznie jest mozolne. Generator pozwala skonfigurować animację wizualnie i dostarcza gotowy CSS, z podglądem na żywo w przeglądarce.

How to Use (Step by Step)

  1. 1

    Wybierz typ animacji

    Wybierz przenikanie, przesunięcie, odbicie, obrót lub inny preset.

  2. 2

    Dostosuj czas

    Ustaw czas trwania, wygładzanie, opóźnienie i liczbę powtórzeń.

  3. 3

    Skopiuj CSS

    Wklej wygenerowane klatki i regułę animation do arkusza stylów.

How It Works

Wybierasz właściwości jak typ, czas trwania, funkcję czasową, opóźnienie i powtórzenia, a narzędzie buduje odpowiednią regułę @keyframes i skrót animation. Funkcja czasowa (ease, linear, cubic-bezier) kształtuje przyspieszenie ruchu, a czas trwania i powtórzenia regulują prędkość i powtarzanie. Widzisz efekt na żywo i kopiujesz CSS do arkusza stylów.

When to Use This

Dodanie subtelnej animacji wejścia do sekcji hero lub karty. Stworzenie wskaźnika ładowania lub efektu pulsu. Prototypowanie ruchu przed zapisaniem go w kodzie.

Frequently Asked Questions

Steruje krzywą przyspieszenia ruchu — ease zaczyna i kończy wolno, linear jest stała, a cubic-bezier pozwala zdefiniować własną krzywą.

Css Animation Generator | Super Easy Utils