Dokumentacja CSS z przykładami: Animacje

Q: Jak zrobić animację w CSS?

Zdefiniuj kroki za pomocą @keyframes name { from { ... } to { ... } }, a potem przypisz ją do elementu właściwością animation z czasem trwania: animation: name 1s ease-out;. Czas trwania jest wymagany, bo domyślnie wynosi 0s.

Q: Jak zapętlić animację CSS w nieskończoność?

Ustaw animation-iteration-count: infinite albo dodaj infinite do skróconego zapisu: animation: spin 1s linear infinite;. Dodaj alternate, żeby w każdym cyklu animacja szła do przodu, a potem do tyłu.

Q: Jak zatrzymać animację CSS?

Ustaw na elemencie animation-play-state: paused, na przykład w :hover albo przez klasę dodaną w JavaScripcie. Ustawienie z powrotem running wznawia ją od miejsca, w którym stanęła.

Q: Jak wyłączyć animacje dla osób, które wolą ograniczony ruch?

Umieść animację w @media (prefers-reduced-motion: no-preference) { ... } albo usuń ją wewnątrz @media (prefers-reduced-motion: reduce) { ... }. To zapytanie odczytuje ustawienie ograniczenia ruchu w systemie operacyjnym użytkownika.

Animacja CSS w jednym przykładzie

Animacja składa się z dwóch części: @keyframes, które opisuje kroki, oraz właściwości animation, która przypisuje je do elementu z określonym czasem trwania. Ta karta wsuwa się i pojawia po załadowaniu strony:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Zmień kod (albo ustaw czas trwania na 2s), a podgląd się przeładuje i znów zobaczysz, jak karta się pojawia. Blok @media (prefers-reduced-motion: reduce) zastępuje klatki kluczowe samym przenikaniem u osób, które mają w systemie włączone ograniczenie ruchu.

Składnia @keyframes

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

from oznacza to samo co 0%, a to to samo co 100%.
Dodaj tyle kroków procentowych, ile potrzebujesz. Kroki z tymi samymi stylami mogą dzielić jedną linię: 0%, 100% { ... }.
Właściwość, której brakuje w pierwszej lub ostatniej klatce kluczowej, jest animowana od albo do własnej wartości elementu.
Nazwę (pulse) przekazujesz do animation-name. Wielkość liter ma znaczenie, a nazwa nie może być słowem kluczowym, takim jak none.

Właściwości animacji

Właściwość	Co ustawia	Domyślnie
`animation-name`	które `@keyframes` uruchomić	`none`
`animation-duration`	długość jednego cyklu	`0s`
`animation-timing-function`	krzywa prędkości między klatkami kluczowymi	`ease`
`animation-delay`	czas oczekiwania przed pierwszym cyklem (wartość ujemna zaczyna w trakcie)	`0s`
`animation-iteration-count`	liczba cykli albo `infinite`	`1`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`normal`
`animation-fill-mode`	style przed i po: `none`, `forwards`, `backwards`, `both`	`none`
`animation-play-state`	`running` albo `paused`	`running`

Zapis skrócony przyjmuje je w niemal dowolnej kolejności. Jedyna zasada: pierwsza wartość czasu to czas trwania, a druga to opóźnienie:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction i fill-mode na żywo

Wybierz kierunek, tryb wypełnienia i liczbę powtórzeń, a potem naciśnij Play. Kwadrat przesuwa się o 200px na koniec toru. Komunikat pokazuje, gdzie się zatrzymał po zakończeniu animacji:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

Na co zwrócić uwagę:

fill-mode: none (domyślnie): po ostatniej klatce kwadrat wraca do x = 0 i znów robi się bursztynowy.
forwards: zostaje na ostatniej klatce kluczowej. Przy normal to x = 200 i kolor zielony; przy reverse kończy na x = 0 i w kolorze niebieskim, bo ostatnią odtworzoną klatką było from.
alternate z liczbą 2 idzie tam i z powrotem, więc nawet z forwards kończy na x = 0.

Nieskończone pętle: wskaźnik ładowania

infinite powtarza animację bez końca, a animation-delay na każdym dziecku przesuwa je w czasie, więc ruszają się po kolei. Pętle powinny być spokojne: powolne, niewielkie, bez migania.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

role="status" razem z aria-label informuje użytkowników czytników ekranu, że coś się ładuje, czego same kropki nie mówią. Obracające się kółko znajdziesz na stronie o rotate.

Pauzowanie i sterowanie animacjami

animation-play-state: paused zatrzymuje animację w miejscu, a running wznawia ją od tego punktu. Najedź kursorem na pasek poniżej, żeby go zatrzymać:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

W JavaScripcie element.getAnimations() zwraca działające animacje CSS, a każda ma pause(), play(), cancel() i currentTime, które możesz odczytać albo ustawić. Zdarzenie animationend zachodzi, gdy kończy się animacja, która nie jest nieskończona, a animationiteration na końcu każdego cyklu.

Szanuj ograniczony ruch i nigdy nie migaj

Dwie zasady dostępności dotyczą każdej animacji:

Ograniczony ruch. Użytkownicy mogą poprosić system o mniej ruchu, bo ruch na ekranie źle na nich wpływa. Najbezpieczniej dodawać ruch tylko wtedy, gdy nie prosili o jego ograniczenie:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

Bez migania. Treść, która miga więcej niż trzy razy na sekundę, może wywołać napad padaczkowy. Całkowicie unikaj szybkiego, kontrastowego migania.

Płynne animacje

Animuj transform i opacity, kiedy tylko możesz. Przeglądarka stosuje je bez ponownego układania strony, więc pozostają płynne nawet na słabych telefonach. Animowanie width, height, top, left albo margin przelicza układ w każdej klatce. Do przesuwania elementu użyj translate() ze strony o transform.

Częste błędy

Brak czasu trwania. animation: fade; nic nie robi, bo domyślny czas trwania to 0s.
Niepasująca nazwa. animation-name musi dokładnie odpowiadać nazwie w @keyframes, łącznie z wielkością liter.
Powrót na końcu. Dodaj forwards (albo both), żeby zachować ostatnią klatkę kluczową.
Mignięcie przed startem opóźnionej animacji. W czasie animation-delay element pokazuje swoje zwykłe style. backwards (albo both) stosuje pierwszą klatkę kluczową w czasie opóźnienia.
Restart animacji przez ustawienie tej samej wartości. Ponowne ustawienie tego samego animation nic nie daje. Usuń ją, wymuś ponowne przeliczenie układu (el.offsetWidth) i ustaw ją znowu, tak jak robi to przycisk Play powyżej.
Animowanie display. Ta właściwość przełącza się od razu. Zamiast niej animuj opacity i transform.

Najczęściej zadawane pytania

Jak zrobić animację w CSS?

Zdefiniuj kroki za pomocą @keyframes name { from { ... } to { ... } }, a potem przypisz ją do elementu właściwością animation z czasem trwania: animation: name 1s ease-out;. Czas trwania jest wymagany, bo domyślnie wynosi 0s.

Co robi animation-fill-mode: forwards?

Zachowuje style ostatniej klatki kluczowej po zakończeniu animacji. Bez tego element od razu wraca do swoich zwykłych stylów. backwards stosuje pierwszą klatkę kluczową w czasie opóźnienia, a both robi jedno i drugie.

Jak zapętlić animację CSS w nieskończoność?

Ustaw animation-iteration-count: infinite albo dodaj infinite do skróconego zapisu: animation: spin 1s linear infinite;. Dodaj alternate, żeby w każdym cyklu animacja szła do przodu, a potem do tyłu.

Czym różni się animation od transition w CSS?

Transition animuje właściwość między dwiema wartościami, gdy ta się zmienia, zwykle przy najechaniu kursorem albo zmianie klasy. Animation uruchamia się sama zaraz po przypisaniu, może mieć dowolną liczbę klatek kluczowych i może się powtarzać, odwracać i zatrzymywać.

Jak zatrzymać animację CSS?

Ustaw na elemencie animation-play-state: paused, na przykład w :hover albo przez klasę dodaną w JavaScripcie. Ustawienie z powrotem running wznawia ją od miejsca, w którym stanęła.

Jak wyłączyć animacje dla osób, które wolą ograniczony ruch?

Umieść animację w @media (prefers-reduced-motion: no-preference) { ... } albo usuń ją wewnątrz @media (prefers-reduced-motion: reduce) { ... }. To zapytanie odczytuje ustawienie ograniczenia ruchu w systemie operacyjnym użytkownika.

Powiązane zagadnienia