Przejścia i animacje — CSS

CSS może łagodnie animować zmianę niektórych właściwości.

Jak to działa?

transition określa, które zmiany mają być płynne. Dla lepszej wydajności często animuje się transform i opacity. Uszanuj preferencję ograniczenia animacji.

Przykład 1 — poznaj zapis

.card { transition: transform 180ms ease; }
.card:hover { transform: translateY(-0.2rem); }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

Karta delikatnie podniesie się przy najechaniu kursorem.

Przeczytaj kod linijka po linijce

.card { transition: transform 180ms ease; }Przypisujemy wartość wybranej właściwości CSS.
.card:hover { transform: translateY(-0.2rem); }Przypisujemy wartość wybranej właściwości CSS.
@media (prefers-reduced-motion: reduce) {Ta reguła działa dopiero po spełnieniu warunku szerokości ekranu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Karta delikatnie przesuwa się w górę po najechaniu, chyba że użytkownik ograniczył animacje.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

button { transition: transform .2s; } button:hover { transform: scale(1.05); }

Wynik drugiego przykładupo uruchomieniu przykładu

Przycisk delikatnie powiększa się po najechaniu.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj łagodne przejście zmiany koloru tła.