Softonic

Generator animacji CSS

Krok 1 / 2
Ustawienie wstępne
Dalej

Pisanie @keyframes od zera jest żmudne: wybierasz procenty, zgadujesz właściwości, odświeżasz, obserwujesz, poprawiasz. Ten generator daje sześć gotowych animacji (zanikanie, wysuwanie w górę, odbicie, obrót, pulsowanie i wstrząs) i pozwala ustawić nazwę animacji, czas trwania, easing, liczbę powtórzeń i kierunek. Wynik odtwarza się w czasie rzeczywistym, a gdy jesteś zadowolony, możesz skopiować wygenerowany blok @keyframes i skróconą właściwość animation.

Jak zbudować animację CSS

  1. 1

    Wybierz preset

    Wybierz jedną z sześciu wbudowanych animacji: zanikanie, wysuwanie w górę, odbicie, obrót, pulsowanie lub wstrząs.

  2. 2

    Nazwij animację

    Nadaj keyframes prawidłowy identyfikator CSS, na przykład `cardIn` lub `fadeIn`. Ta sama nazwa jest używana w skróconej właściwości `animation`.

  3. 3

    Ustaw czas i powtarzanie

    Czas trwania w sekundach, easing (ease, ease-in, ease-out, ease-in-out, linear lub spring), liczba powtórzeń (1, 2, 3 lub infinite) i kierunek (normal, reverse, alternate lub alternate-reverse).

  4. 4

    Skopiuj CSS

    Wygenerowana reguła `@keyframes` i skrócona notacja `animation:` gotowe do wklejenia do arkusza stylów.

Anatomia animacji

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Osiem właściwości w notacji skróconej: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Wybór easingów

Generator oferuje sześć funkcji easing:

Easing cubic-bezier() Odczucie
linear n/d Stała prędkość
ease-in 0.42, 0, 1, 1 Wolny start, szybkie zakończenie
ease-out 0, 0, 0.58, 1 Szybki start, wolne zakończenie
ease-in-out 0.42, 0, 0.58, 1 Wolno-szybko-wolno
ease (domyślny) 0.25, 0.1, 0.25, 1 Delikatny domyślny
spring 0.68, -0.55, 0.27, 1.55 Przestrzeliwuje i stabilizuje się

Animuj właściwe właściwości

Przeglądarka może animować dowolną właściwość, ale tylko kilka z nich działa płynnie na GPU bez wywoływania layoutu lub malowania:

Tanie (tylko kompozycja): transform, opacity, filter.

Kosztowne (layout/malowanie): width, height, top, left, margin, padding, background-color.

Animacje z sześćdziesięcioma klatkami na sekundę na width i top są możliwe na małych elementach, ale na telefonie się zaczną przy dużej liczbie jednocześnie animowanych. Przy złożonym ruchu zawsze preferuj transform: translate(...) zamiast top / left oraz transform: scale(...) zamiast animowanej szerokości/wysokości.

will-change: używaj oszczędnie

Poinformowanie przeglądarki o wcześniejszym przydzieleniu warstwy kompozycji może poprawić płynność:

.card { will-change: transform; }

Ale to zużywa pamięć. Stosuj to tuż przed wyzwoleniem animacji i usuwaj po jej zakończeniu. Stałe ustawianie will-change: transform na wielu elementach może przynieść więcej szkody niż pożytku.

Ograniczenie ruchu

Niektórzy użytkownicy są wrażliwi na ruch i ustawiają preferencje systemowe:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Szanuj to ustawienie. Zaproponuj natychmiastową zmianę stanu lub bardzo subtelne zanikanie jako zamiennik.

Najczęściej zadawane pytania

CSS do prostego, deklaratywnego, jednorazowego ruchu. Web Animations API (element.animate()) do sterowania czasem z JavaScriptu, dynamicznych keyframes, pauzy i kontroli odtwarzania. Obie działają na kompozytorze; żadna nie jest z natury szybsza.

Prawie zawsze dlatego, że animujesz właściwość wywołującą layout (width, top, margin) zamiast transform. Przejdź na translate() i scale(), a przycięcia zwykle znikną.

Tak, animation: a 1s, b 1s 1s, c 1s 2s; uruchamia trzy animacje sekwencyjnie dzięki przesuniętym opóźnieniom. Ten generator produkuje jedną animację, więc dodatkowe wpisy dodaj sam w notacji skróconej. Do bardziej złożonej choreografii użyj Web Animations API lub biblioteki takiej jak GSAP.

Sprawia, że element przyjmuje stan from przed rozpoczęciem animacji (podczas opóźnienia) i utrzymuje stan to po jej zakończeniu. Bez both element wraca do stylu sprzed animacji po jej zakończeniu. Generator trzyma notację minimalną, więc w razie potrzeby dodaj fill mode samodzielnie.

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Walidator OpenAPI

Wklej dokument OpenAPI lub Swagger w JSON albo YAML i sprawdź jego podstawową strukturę: pole wersji, obiekt info i paths, z czytelnymi błędami i ostrzeżeniami.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Kreator diagramów ERD

Utwórz lokalnie diagram encja-relacja z maksymalnie 12 encjami, polami, relacjami i licznościami. Eksportuj Mermaid, SVG, PNG lub JSON.

Narzędzie jest dostępne w innych językach