Animacje CSS i microinteractions — UX bez JS

Microinteractions — małe, ledwo zauważalne animacje przy interakcji — często odróżniają stronę „ładną" od strony, która naprawdę dobrze się używa. W 90% przypadków wystarczy CSS.

Trzy poziomy animacji CSS

• Transitions — płynna zmiana z jednego stanu w drugi (hover, focus)
• Animations + @keyframes — bardziej złożone sekwencje (loaders, attention)
• Scroll-driven animations — nowość 2024-2026, reagujące na scroll bez JS

Transition — podstawa

.button {
  background: #dc2626;
  transition: background 200ms ease, transform 150ms ease;
}
.button:hover {
  background: #b91c1c;
  transform: translateY(-2px);
}

Reguła: nigdy nie animuj all. Listy konkretnych properties są szybsze i bezpieczniejsze.

Co animować, a czego unikać

GPU-accelerated (szybkie):

• transform — translate, scale, rotate
• opacity
• filter — blur, brightness

CPU-bound (wolne, paint-heavy):

• width, height, top, left — używaj transform: translate zamiast tego
• box-shadow — jeśli musisz, użyj filter: drop-shadow
• background — kolory ok, gradients wolne

Microinteractions które warto mieć

1. Button hover — drobne podniesienie + zmiana cienia
2. Focus ring — wyraźny, ale nie agresywny (dostępność!)
3. Form validation — czerwona ramka pojawia się płynnie, nie skokowo
4. Card hover — obraz lekko się powiększa (scale 1.05), tekst „pull up" w 300ms
5. Loader — spinner lub skeleton zamiast pustego ekranu
6. Page transition — w SPA delikatne fade-in nowej zawartości

Scroll-driven animations (CSS-only)

Nowość natywna w Chrome/Edge (Firefox za chwilę). Animacja sterowana scrollem bez Intersection Observer:

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.card {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}

Kiedy potrzebujesz JS biblioteki

• Złożone sekwencje z timeline (GSAP, Framer Motion)
• Animacje sterowane stanem aplikacji (React/Vue + Framer Motion)
• Drag & drop z fizyką
• Animacje SVG (motion path, morphing)

Dostępność — pamiętaj o prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Bez tego animacje mogą powodować realne problemy zdrowotne u osób z zaburzeniami przedsionkowymi.