Jak zbudować animację CSS bez wkuwania składni @keyframes?
@keyframes to deklaratywny sposób animowania w CSS. Definiujesz kilka klatek kluczowych (0%, 50%, 100% albo więcej), dla każdej wartości CSS (transform, opacity, color), a przeglądarka gładko interpoluje między nimi. Wynikiem są płynne animacje 60fps bez JavaScriptu.
Tu masz wizualny edytor. Klikasz preset (fade-in, slide, bounce, shake, pulse, spin) albo dodajesz własne klatki. Każda klatka ma własne przesunięcie X/Y, skalę, obrót, przezroczystość i kolor. Pod spodem podgląd na żywo - animacja działa od razu jak zmieniasz parametry.
W panelu obok ustawiasz globalne: czas trwania, easing, ilość powtórzeń, kierunek (normal / alternate), fill-mode. Klikasz "Kopiuj" i masz gotowy CSS: blok `@keyframes` + klasę z `animation: ...`.
Jak korzystać
- Kliknij preset (fade-in, slide, bounce, pulse, spin) z dolnej galerii. Każdy ma 2-5 gotowych klatek.
- W panelu po prawej zobaczysz listę klatek (0% / 50% / 100% itp.). Kliknij klatkę żeby edytować jej właściwości.
- Suwaki: przesunięcie X/Y, skala (1 = oryginał, 0.5 = mały, 2 = duży), obrót w stopniach, przezroczystość 0-1, kolor tła.
- Czas trwania (100-5000ms), easing (linear, ease, cubic-bezier), powtórzenia (1, infinite), kierunek (alternate = tam i z powrotem).
- Skopiuj CSS, wklej w plik stylów i dodaj klasę `.target` do swojego elementu. Animacja startuje automatycznie.
Do czego się przydaje
Mikrointerakcje to co odróżnia premium UI od taniego. Animacja długości 200-400ms na hover, click, reveal sprawia że strona "czuje" się żywa:
- Fade-in elementów na scroll. Element pojawia się gdy wchodzi w viewport, plus mała translacja od dołu = "wjeżdżający" content.
- Pulse na CTA buttonie. Lekko pulsujący przycisk akcji przyciąga uwagę bez denerwowania (`pulse` infinite, alternate).
- Shake na błąd walidacji formularza. Pole hasła trzęsie się 300ms gdy hasło niepoprawne = jasny visual feedback.
- Bounce na powiadomienia toast. Mała animacja "podskoku" przy wjeździe powiadomienia.
- Spin loader. Klasyczny "spinner" oczekiwania na response z serwera (`spin` infinite linear).
- Slide-in menu mobilnego. Hamburger menu wsuwa się z prawej.
- Color shift hero. Gradient w tle hero zmienia kolory w pętli, daje "premium fintech feel".
Dla niestandardowych krzywych easing użyj generator cubic-bezier. Dla innych efektów wizualnych zobacz box-shadow i clip-path.