Dodanie animacji CSS

Dodanie animacji CSS

Dodanie subtelnych animacji do Twojej strony sprawi, że stanie się ona bardziej dynamiczna i profesjonalna.
Animacje poprawiają UX (user experience), przyciągają uwagę i nadają „życia” nawet prostym interfejsom.

W tej lekcji zobaczysz, jak dodać:

• płynne przejścia do przycisków, obrazów i formularzy,
• animacje wejścia elementów z wykorzystaniem @keyframes,
• efekty hover i micro-interakcje.

1. Płynne przejścia za pomocą transition

Transition to najprostszy sposób, aby np. kolor, cień lub rozmiar zmieniały się stopniowo, a nie nagle.

.card {
  background: white;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  background: #f1f1f1;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

Efekt: po najechaniu karta zyskuje cień i zmienia kolor tła – ale wszystko odbywa się płynnie.

2. Animacje z @keyframes

Jeśli chcesz stworzyć np. pojawiający się element, animację banera lub efekt wchodzenia treści – użyj @keyframes.

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

.hero-text {
  animation: fadeIn 0.8s ease-out forwards;
}

Dodaj klasę .hero-text do nagłówka lub bloku tekstu, który ma się „pojawiać” po załadowaniu strony.

3. Przycisk z animacją „wciśnięcia”

button {
  transition: transform 0.2s ease;
}

button:active {
  transform: scale(0.97);
}

Efekt: po kliknięciu przycisk delikatnie się „wciska” – bardzo popularny efekt UX.

4. Animacja w pętli (np. pulsujący element)

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

Dodaj klasę pulse np. do ikony, logo, strzałki – wszystko, co ma „przyciągać uwagę” delikatnym ruchem.

Wskazówki przy animowaniu:

• Nie przesadzaj – lepiej mniej niż za dużo,
• Nie animuj tekstów ciągłych (np. akapitów), tylko bloki, przyciski, sekcje,
• Używaj animacji wejścia tylko raz – nie w pętli, jeśli to nie jest celowe,
• Wspieraj się klasami – łatwiej zarządzać stylem i efektem.

Responsywność a animacje

Pamiętaj, że niektóre animacje mogą wyglądać inaczej (lub mniej płynnie) na starszych telefonach.
Możesz je wyłączyć lub uprościć dla małych ekranów:

@media (max-width: 480px) {
  .hero-text {
    animation: none;
  }
}

Podsumowanie

• Używaj transition do płynnych zmian (kolor, cień, pozycja),
• Dodawaj animacje wejścia z @keyframes – do nagłówków, sekcji, grafik,
• Stosuj efekty :hover i :active dla przycisków i kart,
• Uważaj na nadmiar – animacja powinna wspierać treść, a nie od niej odciągać.

W kolejnej lekcji nauczysz się, jak dostosować układ strony do urządzeń mobilnych – czyli zadbać o prawdziwą responsywność projektu.