Dokumentacja CSS z przykładami: Transition

Q: W jakiej kolejności są wartości w skrócie transition?

transition: property duration timing-function delay;, na przykład transition: opacity 0.3s ease-in 0.1s;. Jedyna ścisła zasada: pierwsza wartość czasu to czas trwania, a druga to opóźnienie. Kilka przejść oddzielaj przecinkami.

Q: Dlaczego moje przejście CSS nie działa?

Typowe przyczyny: transition jest tylko w regule :hover (więc animacja działa przy najechaniu i wraca skokowo), właściwości nie da się animować (display albo height do auto), czas trwania nie ma jednostki (0.3 zamiast 0.3s) albo wartość zmienia się w tej samej chwili, w której element jest dodawany do strony.

Q: Czy można animować przejściem height: auto?

Nie zwykłym przejściem height w każdej przeglądarce: interpolacja do auto wymaga nowszej właściwości interpolate-size, która nie jest jeszcze wszędzie obsługiwana. Typowe obejścia to animowanie grid-template-rows od 0fr do 1fr na opakowaniu grid albo animowanie max-height do wartości większej niż treść.

Przejście w jednym przykładzie

Przejście mówi przeglądarce: gdy ta właściwość się zmieni, animuj ją przez tyle czasu, zamiast przełączać od razu. Umieść je w zwykłej regule elementu, a nie tylko w :hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

Najedź na pierwszy przycisk: jego kolor płynnie zmienia się na zielony i podnosi się on o 4px w ciągu 0.4 sekundy, a odsunięcie kursora odtwarza to samo przejście w drugą stronę. Drugi przycisk ma transition: none i przełącza się natychmiast. Osoby korzystające z klawiatury dostają ten sam efekt przez :focus-visible.

Skrócony zapis transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Właściwość składowa	Co ustawia	Domyślnie
`transition-property`	które właściwości się animują (`all` albo lista)	`all`
`transition-duration`	jak długo, w `s` lub `ms`	`0s`
`transition-timing-function`	krzywa prędkości	`ease`
`transition-delay`	czekanie przed startem (może być ujemne)	`0s`

Domyślny czas trwania to 0s, dlatego nic się nie animuje, dopóki go nie ustawisz. W skrócie pierwsza wartość czasu to zawsze czas trwania, a druga to opóźnienie. Dla różnych ustawień każdej właściwości oddziel je przecinkami:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Funkcje czasu obok siebie

Funkcja czasu decyduje, jak zmienia się prędkość w trakcie przejścia. Naciśnij Play, a wszystkie siedem pasków przebędzie tę samą odległość w tych samych 1.5 sekundy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Funkcja czasu	Odczucie
`linear`	stała prędkość, mechaniczna
`ease` (domyślna)	szybki start, łagodne zatrzymanie
`ease-in`	wolny start, szybki koniec: dobra dla elementów, które znikają
`ease-out`	szybki start, wolny koniec: dobra dla elementów, które się pojawiają
`ease-in-out`	wolno na obu końcach
`cubic-bezier(x1, y1, x2, y2)`	własna krzywa; y powyżej 1 przestrzeliwuje i wraca
`steps(n)`	skacze w n równych krokach, bez klatek pośrednich

Przy efektach hover i menu ease-out z czasem od 150ms do 300ms daje wrażenie szybkiej reakcji.

Co można animować przejściem

Przejściem można animować właściwości, które mają wartości pośrednie: kolory, długości (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Właściwości, które przeskakują między słowami kluczowymi, takie jak display czy font-family, przełączają się od razu.

height: auto to pułapka, na którą ludzie trafiają najczęściej: panel otwierany z height: 0 do height: auto domyślnie się nie animuje, bo przeglądarka nie oblicza wartości między 0 a "auto". Niezawodne obejście to opakowanie grid, którego jedyny wiersz zmienia się z 0fr na 1fr:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded informuje osoby korzystające z czytników ekranu, czy panel jest otwarty, czego sama animacja nie robi.

Uruchamianie kodu po zakończeniu przejścia

Zdarzenie transitionend jest wywoływane po zakończeniu przejścia, raz dla każdej właściwości. Użyj go, żeby zrobić coś po ruchu, na przykład przenieść fokus albo usunąć element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Szanuj ograniczony ruch

Niektórzy włączają w ustawieniach systemu "ogranicz ruch", bo ruch na ekranie przyprawia ich o zawroty głowy albo rozprasza. Zachowaj płynne zmiany koloru i przezroczystości, a duże ruchy wyłącz za pomocą media query:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Zadbaj o płynność przejść

transform i opacity to najtańsze właściwości do animowania: przeglądarka może przesunąć i wygasić element bez przeliczania układu. Animowanie przejściem width, height, top lub margin zmusza przeglądarkę do ponownego układania strony w każdej klatce, co na wolnych telefonach może się zacinać. Żeby coś przesunąć, wybieraj transform: translate() zamiast left albo margin. Strona o transform omawia te funkcje.

Częste błędy

transition tylko w regule :hover. Efekt animuje się przy najechaniu, ale wraca skokowo, gdy hover się kończy. Umieść transition w regule bazowej.
Czas trwania bez jednostki. transition: opacity 300 jest nieprawidłowe. Napisz 300ms albo 0.3s.
transition: all. Animuje każdą zmieniającą się właściwość, także te, które miały zostać bez animacji, i może spowalniać zmiany układu. Wypisz właściwości.
Oczekiwanie, że display: none się wygasi. display przełącza się od razu. Zamiast tego wygaszaj opacity (i ustaw visibility: hidden po zakończeniu wygaszania).
Przejście do height: auto. Przeskakuje. Użyj techniki z grid-template-rows opisanej wyżej.
Długie czasy przy drobnych interakcjach. Wszystko powyżej około 400ms na przycisku czy menu wydaje się wolne.

Najczęściej zadawane pytania

Jak działają przejścia CSS?

Deklarujesz na elemencie, które właściwości mają się animować i jak długo, na przykład transition: background-color 0.3s ease;. Gdy wartość tej właściwości się zmienia (przez :hover, klasę albo JavaScript), przeglądarka animuje ją od starej wartości do nowej, zamiast przełączyć od razu.

W jakiej kolejności są wartości w skrócie transition?

transition: property duration timing-function delay;, na przykład transition: opacity 0.3s ease-in 0.1s;. Jedyna ścisła zasada: pierwsza wartość czasu to czas trwania, a druga to opóźnienie. Kilka przejść oddzielaj przecinkami.

Dlaczego moje przejście CSS nie działa?

Typowe przyczyny: transition jest tylko w regule :hover (więc animacja działa przy najechaniu i wraca skokowo), właściwości nie da się animować (display albo height do auto), czas trwania nie ma jednostki (0.3 zamiast 0.3s) albo wartość zmienia się w tej samej chwili, w której element jest dodawany do strony.

Czy można animować przejściem height: auto?

Nie zwykłym przejściem height w każdej przeglądarce: interpolacja do auto wymaga nowszej właściwości interpolate-size, która nie jest jeszcze wszędzie obsługiwana. Typowe obejścia to animowanie grid-template-rows od 0fr do 1fr na opakowaniu grid albo animowanie max-height do wartości większej niż treść.

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

Przejście uruchamia się raz, między dwiema wartościami, gdy właściwość się zmienia. Animacja używa @keyframes, może mieć wiele kroków, startuje sama po załadowaniu strony i może się powtarzać lub zapętlać.

Powiązane zagadnienia