Frontend Academy · Lekcja

Animacje @keyframes

Proszę definiować wieloetapowe animacje za pomocą @keyframes, dołączać je skróconą właściwością animation oraz sterować powtórzeniami, kierunkiem i fill-mode.

Animacje @keyframes to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Przejścia a animacje

Przejścia animują zmianę między dwoma stanami wywołaną zmianą wartości. Animacje @keyframes uruchamiają się automatycznie, mogą się zapętlać, odtwarzać wstecz, działać bez końca i definiować wiele pośrednich kroków — nie wymagają żadnego wyzwalacza.

Definiowanie @keyframes

Sekwencję animacji należy zadeklarować za pomocą @keyframes. Stany można definiować procentowo (0%, 50%, 100%) albo za pomocą słów kluczowych from i to.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

Skrótowa składnia animation

animation: name duration timing-function delay iteration-count direction fill-mode. Za pomocą tego skrótu można zastosować animację do elementu.

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

Ustawia liczbę odtworzeń animacji. Wartość infinite zapętla animację bez końca. Liczba powoduje dokładnie tyle odtworzeń, ile wskazuje.

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal (domyślnie): za każdym razem do przodu. reverse: wstecz. alternate: do przodu, a następnie do tyłu. alternate-reverse: w odwrotnej kolejności. Wartość alternate świetnie nadaje się do efektów typu ping-pong.

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

Określa stan elementu przed animacją i po niej. forwards: element pozostaje w stanie z ostatniej klatki kluczowej. backwards: podczas opóźnienia stosuje stan początkowy. both: oba te zachowania.

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

Animacje można wstrzymywać i wznawiać za pomocą JavaScriptu, przełączając animation-play-state: paused | running.

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

Wiele animacji

Do jednego elementu można zastosować wiele animacji, oddzielając je przecinkami. Każda animacja działa niezależnie.

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

Animacje z przesunięciem czasowym za pomocą animation-delay

Animację elementów listy można rozłożyć w czasie, zwiększając opóźnienie dla każdego elementu. Właściwości niestandardowe CSS ułatwiają to za pomocą JavaScriptu.

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — wskazówka dla przeglądarki

will-change: transform informuje przeglądarkę, że dana właściwość będzie animowana, dzięki czemu może ona wcześniej przenieść element na własną warstwę kompozytora. Należy używać tego oszczędnie — zbyt wiele warstw kompozytora marnuje pamięć GPU.

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

Praktyka: ekran ładowania typu skeleton

Ekrany typu skeleton wykorzystują animację połysku, aby wskazać, że trwa ładowanie treści. Gradient przesuwa się po kształtach zastępczych.

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

Szybkie sprawdzenie

Wartość animation-fill-mode sprawia, że element zachowuje stan z ostatniej klatki kluczowej po zakończeniu animacji?

Powtórka: animacje @keyframes

Animacje definiuje się za pomocą @keyframes, używając from/to lub wartości procentowych. Stosuje się je za pomocą skrótu animation. iteration-count służy do zapętlania. Kierunek alternate tworzy efekt ping-pong. fill-mode: forwards zachowuje stan końcowy. Animacje można rozłożyć w czasie za pomocą animation-delay i zmiennych CSS. Aby uzyskać płynne animacje kompozytowane, należy używać klatek kluczowych transform i opacity.

Często zadawane pytania

Czy lekcja „Animacje @keyframes” jest bezpłatna?

Tak — pełny tekst „Animacje @keyframes” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Animacje @keyframes”?

Proszę definiować wieloetapowe animacje za pomocą @keyframes, dołączać je skróconą właściwością animation oraz sterować powtórzeniami, kierunkiem i fill-mode. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Animacje @keyframes”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy