CSS Animacje i przejścia (transitions)

CSS pozwala na dodawanie płynnych animacji i efektów przejścia do elementów na stronie bez konieczności używania JavaScriptu. W tej lekcji zajmiemy się zarówno przejściami (transitions), które umożliwiają płynne zmiany jednej właściwości, jak i bardziej zaawansowanymi animacjami (animations).

Przejścia w CSS (Transitions)

Przejścia umożliwiają płynne zmienianie wartości CSS, np. koloru, rozmiaru lub pozycji elementu. Domyślnie zmiany te odbywają się natychmiast, ale przy użyciu przejść możesz kontrolować, jak długo zmiana trwa i jak ma być wykonana.

Podstawowy przykład przejścia:

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: red;
}

W tym przykładzie:

Gdy użytkownik najedzie myszką na przycisk (:hover), kolor tła zmienia się z niebieskiego na czerwony, ale dzięki transition zmiana ta trwa 0.5 sekundy i odbywa się w płynny sposób.

Składnia transition:

transition-property – Właściwość, którą chcesz animować (np. background-color, width, transform).
transition-duration – Czas trwania przejścia (np. 0.5s).
transition-timing-function – Funkcja określająca, jak zmiana powinna być wykonywana (np. ease, linear, ease-in, ease-out, ease-in-out).
transition-delay – Opóźnienie przed rozpoczęciem przejścia (np. 0.2s).

Przykład: Wiele właściwości w jednym przejściu:

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: width 1s ease, background-color 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
  background-color: orange;
}

W tym przykładzie zarówno szerokość, jak i kolor tła zmieniają się płynnie, ale mają różne czasy trwania i funkcje przejścia.

CSS Animacje (Animations)

Animacje są bardziej zaawansowane niż przejścia, ponieważ pozwalają na definiowanie bardziej złożonych sekwencji zmian właściwości CSS, które mogą odbywać się wielokrotnie lub jednorazowo. W CSS animacje definiuje się za pomocą reguły @keyframes.

Podstawowy przykład animacji:

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 2s forwards;
}

W tym przykładzie:

@keyframes definiuje animację o nazwie slide, która przesuwa element z pozycji 0 do 300px w poziomie.
Właściwość animation na elemencie .box uruchamia animację trwającą 2 sekundy i wykonującą się do przodu (forwards), co oznacza, że element pozostaje w nowej pozycji po zakończeniu animacji.

Składnia animation:

animation-name – Nazwa animacji, zdefiniowana w @keyframes.
animation-duration – Czas trwania animacji (np. 2s).
animation-timing-function – Funkcja określająca, jak animacja ma być wykonana (ease, linear, ease-in, ease-out).
animation-delay – Opóźnienie przed rozpoczęciem animacji.
animation-iteration-count – Liczba powtórzeń animacji (np. infinite, 2).
animation-direction – Kierunek animacji (normal, reverse, alternate, alternate-reverse).
animation-fill-mode – Określa, czy animacja ma zachować stan końcowy po zakończeniu (forwards, backwards).

Przykład: Złożona animacja z @keyframes:

@keyframes colorChange {
  0% {
    background-color: blue;
    transform: rotate(0deg);
  }
  50% {
    background-color: green;
    transform: rotate(180deg);
  }
  100% {
    background-color: red;
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  animation: colorChange 4s infinite;
}

W tym przykładzie animacja colorChange:

Zmienia kolor tła z niebieskiego na zielony, a potem na czerwony.
Element obraca się o 360 stopni.
Animacja trwa 4 sekundy i jest powtarzana w nieskończoność (infinite).

Kontrolowanie animacji i przejść

transition-timing-function i animation-timing-function:

Funkcje czasowe pozwalają kontrolować, jak szybko lub wolno animacja lub przejście powinny zmieniać wartości w czasie. Oto kilka przykładów:

ease – Domyślna funkcja, która zaczyna się powoli, przyspiesza i na końcu zwalnia.
linear – Animacja/przejście odbywa się w stałym tempie.
ease-in – Animacja/przejście zaczyna się powoli, a potem przyspiesza.
ease-out – Animacja/przejście zaczyna się szybko, a potem zwalnia.
ease-in-out – Kombinacja obu, zaczyna się i kończy powoli.

Przykład: Różne funkcje czasowe:

.box1 {
  transition: width 2s ease;
}
.box2 {
  transition: width 2s linear;
}
.box3 {
  transition: width 2s ease-in-out;
}

Łączenie animacji i przejść

Możesz także łączyć animacje i przejścia, aby uzyskać bardziej złożone efekty.

Przykład: Łączenie animacji z przejściami:

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 1s ease;
  animation: move 3s infinite alternate;
}

.box:hover {
  background-color: red;
}

W tym przykładzie:

Element .box zmienia kolor tła na czerwony przy najechaniu myszką (przejście).
Element porusza się poziomo w lewo i prawo w nieskończonej animacji (infinite alternate).

Praktyczne zastosowania animacji i przejść

CSS Animacje i przejścia są często używane do tworzenia efektów interfejsu użytkownika, takich jak:

Efekty hover – Animacje przy najechaniu myszką.
Animowane przyciski – Przycisk, który zmienia rozmiar lub kolor po kliknięciu.
Animowane ładowanie – Koła ładowania (loading spinners).
Wprowadzenie tekstu – Stopniowe pojawianie się tekstu na stronie.

Ćwiczenie: Tworzenie animowanego przycisku

Stwórz animowany przycisk, który zmienia kolor i rozmiar po najechaniu myszką oraz stopniowo obraca się o 360 stopni w nieskończonej pętli.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animacje</title>
  <style>
    .button {
      padding: 15px 30px;
      background-color: blue;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease;
      animation: rotateButton 5s infinite linear;
    }

    .button:hover {
      background-color: red;
      transform: scale(1.2);
    }

    @keyframes rotateButton {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>

  <button class="button">Kliknij mnie</button>

</body>
</html>

Gratulacje! Ukończyłeś lekcję 11.
Przejdź teraz do lekcji 12 >> Responsywność i Media Queries

Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki:
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera:

Lekcja 11 – CSS Animacje i przejścia (transitions)

Przejścia w CSS (Transitions)

CSS Animacje (Animations)

Kontrolowanie animacji i przejść

Łączenie animacji i przejść

Praktyczne zastosowania animacji i przejść

Ćwiczenie: Tworzenie animowanego przycisku

Spis Treści - darmowy kurs HTML i CSS