Animacje na wejściu, hover i fokusy

Animacje na wejściu, hover i fokusy

Animacje i efekty interakcji mogą całkowicie odmienić odbiór projektu.
Nie muszą być skomplikowane – ważne, by były subtelne, konsekwentne i dopasowane do kontekstu.

W tej lekcji nauczysz się:

• jak animować pojawianie się elementów na stronie,
• jak dodawać płynne efekty hover do przycisków i kart,
• jak wyróżniać aktywne pola formularzy i inne elementy fokusowalne.

1. Animacje na wejściu

Użyj @keyframes, aby stworzyć płynną animację pojawienia się komponentu:

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

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

Dodaj tę klasę np. do nagłówka sekcji „hero”:

<h1 class="hero__title animate-fadeInUp">Witamy na stronie</h1>

Możesz też dodać opóźnienie:

.animate-fadeInUp-delay {
  animation-delay: 0.3s;
}

2. Hover – reakcja na najechanie

Użytkownik musi widzieć, że coś jest interaktywne.
Najlepiej robić to subtelnie – przez zmianę tła, koloru, cienia, skalę.

.button {
  background-color: var(--color-primary);
  color: white;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: #0a58ca;
  transform: translateY(-2px);
}

Dla kart:

.card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transform: scale(1.02);
}

3. Efekty fokus (focus) – np. dla formularzy

Pole formularza powinno się wizualnie wyróżnić po kliknięciu.
Przykład stylizacji :focus:

.input {
  border: 1px solid #ccc;
  padding: var(--space-sm);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
  outline: none;
}

4. Dobór czasu i płynności

Unikaj zbyt szybkich lub zbyt wolnych efektów. Dobre wartości to:

• transition: ... 0.2s – 0.5s dla hovera
• animation: ... 0.6s – 1s dla wejścia

Używaj funkcji takich jak:

• ease – domyślna, miękka
• ease-out – szybciej na początku, wolniej na końcu
• ease-in-out – miękki start i koniec

Ćwiczenie

Wprowadź animacje do swojego projektu:

• Dodaj klasę z @keyframes dla tytułu lub CTA w sekcji „hero”
• Stwórz efekt hover dla przycisku i karty
• Stwórz styl fokus dla pola formularza

Testuj na różnych urządzeniach – pamiętaj, że zbyt dynamiczne efekty mogą być męczące na telefonie.
Zawsze stawiaj na subtelność i spójność.

Wniosek

Estetyczne efekty to nie ozdoba, ale element komunikacji z użytkownikiem.
Dzięki animacjom, hoverom i fokusom Twoja strona jest bardziej zrozumiała, intuicyjna i przyjemna w odbiorze.
To małe detale – ale robią dużą różnicę.