7. Animacje CSS – transitions, animations, keyframes

Animacje dodają interaktywności i życia do stron – od prostych hover do złożonych efektów.

Dlaczego to ważne?

Poprawiają UX, ale używaj z umiarem (prefers-reduced-motion). W 2026: view transitions dla płynnych zmian stron.

Transitions – proste zmiany

.btn {
  transition: transform 0.3s ease, background 0.2s; /* właściwość, czas, timing */
}

.btn:hover {
  transform: scale(1.05);
  background: #0d6efd;
}

Animations i @keyframes

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

.element {
  animation: fade-in 1s ease-in-out forwards; /* nazwa, czas, timing, fill-mode */
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner { animation: rotate 2s linear infinite; }

• transition – płynne zmiany właściwości
• @keyframes – definiuje animację
• animation – aplikuje keyframes
• timing-function – ease, linear, ease-in-out
• will-change: transform; – optymalizuje wydajność
• @media (prefers-reduced-motion: reduce) – wyłącz animacje

Zadanie

W pliku style.css i index.html:

• dodaj transition na button hover (scale + color)
• zrób fade-in animację dla sekcji
• dodaj loading spinner z @keyframes