Kurs HTML

Wprowadzenie

Teoria animacji CSS jest ważna, ale najlepiej zrozumieć ich działanie i potencjał, analizując praktyczne przykłady. Poniżej znajdziesz kilka typowych zastosowań animacji CSS, które możesz dostosować do własnych potrzeb.

W przykładach użyjemy skróconej właściwości animation dla zwięzłości.

Przykład 1: Prosty Loader (Obracający się okrąg)

Klasyczny przykład animacji ładowania.

@keyframes obrotLoader {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3; /* Jasnoszare tło */
  border-top: 5px solid #3498db; /* Niebieski wskaźnik */
  border-radius: 50%;
  animation: 1s linear infinite obrotLoader;
}
Kopiuj

<div class="loader"></div>Kopiuj

Wyjaśnienie: Tworzymy okrąg za pomocą border-radius: 50%;. Górna krawędź (border-top) ma inny kolor, tworząc wskaźnik. Animacja obrotLoader obraca element w nieskończoność (infinite) ze stałą prędkością (linear) przez 1 sekundę.

Przykład 2: Pulsowanie Elementu

Subtelne pulsowanie może zwrócić uwagę na ważny przycisk lub powiadomienie.

@keyframes pulsowanie {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.przycisk-puls {
  padding: 10px 20px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  animation: 2s ease-in-out infinite pulsowanie;
}
Kopiuj

<button class="przycisk-puls">Kliknij mnie!</button>Kopiuj

Wyjaśnienie: Animacja pulsowanie zmienia skalę (transform: scale()) i przezroczystość (opacity) elementu. W połowie animacji (50%) element jest lekko powiększony i bardziej przezroczysty, po czym wraca do stanu początkowego. Użycie infinite i ease-in-out tworzy płynne, ciągłe pulsowanie.

Przykład 3: Efekt Pisania na Maszynie

Symulacja tekstu pojawiającego się litera po literze.

@keyframes pisanie {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes mruganieKursora {
  from, to { border-color: transparent; }
  50% { border-color: orange; } 
}

.pisany-tekst {
  overflow: hidden; /* Ukryj tekst wychodzący poza szerokość */
  border-right: .15em solid orange; /* Kursor */
  white-space: nowrap; /* Zapobiegaj zawijaniu tekstu */
  margin: 0 auto; /* Wycentruj (opcjonalnie) */
  letter-spacing: .1em; /* Odstępy (opcjonalnie) */
  /* Animacja pisania: 3.5s, 1 krok na znak (dostosuj czas i kroki!) */
  animation: 
    pisanie 3.5s steps(30, end) 1s 1 normal both, 
    mruganieKursora .75s step-end infinite;
}
Kopiuj

<h1 class="pisany-tekst">To jest efekt pisania...</h1>Kopiuj

Wyjaśnienie: To bardziej złożony przykład. Animacja pisanie stopniowo zwiększa szerokość elementu od 0 do 100%. Użycie steps(30, end) dzieli tę animację na 30 kroków (liczba znaków + ewentualne spacje), co sprawia, że tekst pojawia się skokowo. overflow: hidden; i white-space: nowrap; są kluczowe. Druga animacja, mruganieKursora, symuluje migający kursor za pomocą zmiany koloru prawej krawędzi (border-right). animation-fill-mode: both; dla pisania jest ważne, aby tekst pozostał widoczny po zakończeniu.

Uwaga: Liczba kroków w steps() i czas trwania pisanie muszą być starannie dobrane do długości tekstu.

Przykład 4: Płynne Pojawienie się Elementu (Fade In & Slide Up)

Połączenie zmiany przezroczystości i pozycji dla eleganckiego efektu wejścia.

@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element-pojawiajacy {
  /* Początkowo ukryty (można też ustawić w @keyframes from) */
  /* opacity: 0; */ 
  animation: 1s ease-out 0.5s 1 normal forwards fadeInSlideUp;
  /* duration | timing-function | delay | iteration-count | direction | fill-mode | name */
}
Kopiuj

<div class="element-pojawiajacy">Treść elementu...</div>Kopiuj

Wyjaśnienie: Animacja fadeInSlideUp zaczyna od elementu całkowicie przezroczystego (opacity: 0) i przesuniętego w dół (translateY(20px)). W trakcie animacji element staje się w pełni widoczny (opacity: 1) i wraca na swoją pozycję (translateY(0)). Użycie animation-fill-mode: forwards; sprawia, że element pozostaje widoczny po zakończeniu animacji. Opóźnienie 0.5s powoduje, że animacja startuje chwilę po załadowaniu.