Kurs HTML

Czym są Przejścia CSS?

Przejścia CSS (CSS Transitions) pozwalają na **płynną animację zmiany wartości właściwości CSS** w określonym czasie. Zamiast natychmiastowej zmiany (np. koloru tła przy najechaniu myszą), przejście powoduje stopniową zmianę wartości od stanu początkowego do końcowego.

Dzięki przejściom możemy tworzyć bardziej eleganckie, subtelne i angażujące interfejsy użytkownika, dodając animacje do interakcji takich jak najechanie myszą (:hover), uzyskanie fokusu (:focus) czy zmiana klasy elementu za pomocą JavaScript.

Podstawowa koncepcja

Aby zdefiniować przejście, musimy określić co najmniej dwie rzeczy:

1. Która właściwość CSS ma być animowana? (np. background-color, width, opacity, transform)
2. Jak długo ma trwać animacja (przejście)? (czas trwania)

Przeglądarka automatycznie obliczy pośrednie stany właściwości między wartością początkową a końcową i wyświetli je w czasie, tworząc płynną animację.

Przykład bez przejścia:

.button {
  background-color: blue;
  padding: 10px 20px;
  color: white;
}

.button:hover {
  background-color: red; /* Natychmiastowa zmiana koloru */
}
Kopiuj

Przykład z przejściem:

.button {
  background-color: blue;
  padding: 10px 20px;
  color: white;
  /* Definicja przejścia */
  transition-property: background-color; /* Co animować */
  transition-duration: 0.5s; /* Jak długo */
}

.button:hover {
  background-color: red; /* Zmiana wyzwoli płynne przejście */
}
Kopiuj

W drugim przykładzie, po najechaniu myszą na przycisk, kolor tła będzie płynnie zmieniał się z niebieskiego na czerwony przez pół sekundy.

Ważne: Przejście definiujemy na **elemencie w jego stanie bazowym**, a nie w stanie docelowym (np. :hover). Przejście określa, jak element ma reagować na *każdą* zmianę zdefiniowanej właściwości.

Kluczowe właściwości przejść

Do kontrolowania przejść służą cztery główne właściwości CSS:

• transition-property: Określa, które właściwości CSS mają być animowane podczas przejścia.
• transition-duration: Określa czas trwania przejścia (np. w sekundach s lub milisekundach ms).
• transition-timing-function: Określa krzywą przyspieszenia przejścia (jak szybko animacja przebiega w czasie, np. ease, linear, ease-in-out).
• transition-delay: Określa opóźnienie przed rozpoczęciem przejścia.

Istnieje również właściwość skrócona transition, która pozwala zdefiniować wszystkie te aspekty w jednej deklaracji. Te właściwości zostaną szczegółowo omówione w kolejnych lekcjach tego rozdziału.