Generator Keyframes CSS - Animacja z Podglądem i Tailwind

Generator keyframes CSS: animacja z podglądem i gotowym kodem

Osiem gotowych efektów (pojawianie, znikanie, wsuwanie, powiększanie, pulsowanie, obrót, potrząsanie i podskok) zamienia się tu w kompletny blok @keyframes i jedną linię animation. Przykład: wsuwanie z dołu o 30 px, czas 0,6 s, opóźnienie 0,2 s daje animation: slide-in 0.6s ease-out 0.2s both;, a animacja kończy się po 0,8 s. Do tego podgląd na żywo, rozpisanie na siedem właściwości, wersja dla Tailwind CSS v4 i ostrzeżenia o dostępności.

Jak zrobić animację CSS w generatorze - krok po kroku

1
Efekt i siła efektu - wybierz ruch z listy. „Siła efektu” znaczy co innego dla każdego z nich: dystans w pikselach przy wsuwaniu (domyślnie 40), skala początkowa przy powiększaniu (0,8), skala w połowie cyklu przy pulsowaniu (1,05), kąt przy obrocie (360), wychylenie przy potrząsaniu (6 px) i wysokość podskoku (20 px). Przy wsuwaniu wybierasz jeszcze stronę, z której element nadlatuje.
2
Czas trwania i opóźnienie - w sekundach, z przecinkiem albo kropką. Opóźnienie może być ujemne: animacja wystartuje od razu, ale „w środku”.
3
Funkcja czasu - jedno z pięciu słów kluczowych albo „własna”, gdzie wklejasz cubic-bezier(...) lub steps(...) skopiowane z narzędzi deweloperskich przeglądarki.
4
Powtarzanie, kierunek i wypełnienie - raz, wybraną liczbę razy (także 2,5) albo bez końca; kierunek normal, reverse, alternate lub alternate-reverse; tryb wypełnienia decyduje, co element pokazuje przed startem i po końcu.
5
Nazwa animacji i ograniczenie ruchu - nazwa trafia do @keyframes i do klasy. Opcja ograniczenia ruchu owija regułę w zapytanie prefers-reduced-motion, więc osoby, które w systemie wyłączyły animacje, ich nie zobaczą.
6
Odczytaj wynik - podgląd, długość cyklu, moment zakończenia, kod CSS, tabela właściwości i dwa warianty dla Tailwinda. Puste pola dostają wartości dobrane do efektu, a generator mówi, które to były.

Porównanie: animation czy transition?

Oba mechanizmy płynnie zmieniają wartości CSS, ale nadają się do innych zadań. Tabela pomaga wybrać, zanim zaczniesz pisać kod.

Parametr	animation + @keyframes	transition
Start	sam, po załadowaniu klasy	dopiero przy zmianie wartości, np. :hover
Etapy pośrednie	dowolne (0 %, 20 %, 60 %...)	tylko stan początkowy i końcowy
Powtarzanie	liczba razy albo bez końca	brak, jeden przebieg na zmianę
Ruch w obie strony	alternate	sam, gdy wartość wraca
Stan po końcu	wraca do stylów elementu, chyba że forwards lub both	zostaje nowa wartość
Typowe zastosowanie	wejście sekcji, ładowanie, przyciąganie uwagi	hover przycisku, rozwijane menu
Werdykt	ruch bez udziału użytkownika albo z wieloma etapami	reakcja na najechanie, fokus lub zmianę klasy

Czas animacji: wzór i trzy przykłady

Przy skończonej liczbie powtórzeń animacja kończy się po czasie:

koniec = opóźnienie + czas trwania × liczba powtórzeń

Wynik poniżej zera oznacza, że animacja jest skończona, zanim się pojawi. W skrócie animation pierwsza wartość czasu to zawsze czas trwania, a druga to opóźnienie, więc kolejność ma znaczenie.

Pojawianie z opóźnieniem. 0,2 s + 0,6 s × 1 = 0,8 s. Z „both” element jest przezroczysty już w czasie tych 0,2 s, bez tego mignąłby na początku.

Ułamkowe powtórzenia. Czas 0,4 s, powtórzeń 2,5: 0 + 0,4 × 2,5 = 1 s, a ostatni cykl urywa się w połowie czasu. Przy pojawianiu z „both” element zostaje częściowo przezroczysty: przy krzywej ease-out w połowie czasu krycie wynosi już ok. 0,68, a nie 0,5.

Ujemne opóźnienie. −2 s + 0,6 s × 1 = −1,4 s. Animacja jest zakończona, zanim użytkownik ją zobaczy, więc generator wpisze „po 0 s” i ostrzeże.

Słowa kluczowe funkcji czasu to skróty krzywych Béziera ze specyfikacji CSS Easing: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1). We własnej krzywej pierwsza i trzecia liczba muszą mieścić się od 0 do 1, druga i czwarta mogą wyjść poza ten zakres.

Najczęstsze błędy w animacjach CSS

Element miga przed pojawieniem. Opóźnienie bez backwards lub both pokazuje element w normalnym stanie, a pierwsza klatka włącza się dopiero po opóźnieniu. Rozwiązanie: fill-mode both.

Zniknięty element wraca. Bez forwards po końcu znikania animacja przestaje działać i element znów jest widoczny. Pamiętaj też, że przezroczysty element dalej zajmuje miejsce i przyjmuje kliknięcia.

Nazwa jak słowo kluczowe. Animacja nazwana ease albo infinite zostanie w skrócie odczytana jako inna właściwość, a none oznacza brak animacji. Generator takie nazwy odrzuca.

Nieskończony ruch bez pauzy. Według WCAG ruch, który startuje sam, trwa ponad 5 s i stoi obok innej treści, musi dać się zatrzymać. Ikona ładowania znikająca po chwili jest w porządku, pulsujący baner przez cały czas już nie.

Za szybkie miganie. Więcej niż 3 błyski na sekundę mogą wywołać napad u osób z padaczką fotogenną. Pojawianie albo znikanie w pętli może go przekroczyć, gdy miga duża, kontrastowa powierzchnia: przy kierunku alternate już przy czasie krótszym niż ok. 0,17 s, przy normal krótszym niż ok. 0,33 s, bo każdy cykl kończy się skokiem do początku.

Animowanie left i top zamiast transform. Zmiana położenia przez left, top, width czy margin przelicza układ strony w każdej klatce. Wszystkie efekty generatora używają transform i opacity, które przeglądarka zmienia bez przebudowy układu.

Keyframes w Tailwind CSS v4

Generator daje dwie wersje. Klasa z wartością dowolną, np. animate-[slide-in_0.6s_ease-out_0.2s_both], gdzie spacje zastępuje podkreślenie; blok @keyframes trzeba wtedy dodać do CSS osobno. Druga wersja to wpis w @theme ze zmienną --animate-slide-in i keyframes w środku, po którym działa zwykła klasa animate-slide-in. Przy włączonym ograniczeniu ruchu klasa dostaje przedrostek motion-safe:. Nazwy spin, ping, pulse i bounce są zajęte przez wbudowane animacje Tailwinda, więc wpis w motywie je nadpisze.

Pytania o @keyframes i animation

Co się stanie, gdy w keyframes nie ma from albo to?

Przeglądarka sama dopisze brakującą klatkę 0 % lub 100 % z bieżących wartości elementu. Dlatego blok z samym to { opacity: 0 } też działa.

Czy procent w keyframes może być większy niż 100?

Nie. Selektor poniżej 0 % lub powyżej 100 % jest nieprawidłowy i cały jego blok zostaje pominięty. Samo „0” bez znaku procentu też nie działa, trzeba pisać 0% albo from.

Dwie reguły @keyframes o tej samej nazwie: która wygrywa?

Ostatnia w kolejności dokumentu, wcześniejsze są ignorowane w całości. To częsta przyczyna „animacja działa inaczej niż w generatorze”, gdy w projekcie jest już biblioteka z tą samą nazwą.

Jak zatrzymać animację w połowie?

animation-play-state: paused zamraża element w bieżącym miejscu, a running wznawia od tego punktu. Jeśli pauza wypadnie w czasie opóźnienia, zegar opóźnienia też staje.

Czym różni się steps() od zwykłej krzywej?

steps(8) dzieli ruch na 8 skoków bez płynnego przejścia, co przydaje się przy animacji poklatkowej ze sprite'a albo wskazówce zegara. Pozycja jump-none wymaga co najmniej 2 kroków.

Czemu podgląd nie działa w pętli?

Bo podgląd odtwarza animację tyle razy, ile wynika z pola „Powtarzanie”, np. raz albo 3 razy. Ponowne kliknięcie „Oblicz” tworzy podgląd od nowa z unikalną nazwą, więc animacja rusza jeszcze raz. Efekty w pętli lecą bez przerwy.

Powiązane narzędzia

Kalkulator BCS Psa

Ocena kondycji psa w skali 1-9 i 1-5, procent nadwagi i masa idealna według wytycznych AAHA - Zobacz kalkulator

Generator Placeholder

Obrazek zastępczy SVG w dowolnym rozmiarze z napisem, gotowy jako data URI i tło CSS - Zobacz generator

Generator Box Shadow

Cień CSS z podglądem, który łatwo połączyć z animacją uniesienia karty - Zobacz generator

Generator Text Shadow

Cień i obrys tekstu z kontrolą kontrastu WCAG - Zobacz generator

Generator Border Radius

Zaokrąglone rogi z podglądem i klasami Tailwind - Zobacz generator

Generator Gradient CSS

Tło z przejściem kolorów, które można potem animować - Zobacz generator

Generator Kolorów

Losowe kolory i palety do animowanych elementów - Zobacz generator