Tworzenie sekwencji animacji

Tworzenie sekwencji animacji

W motion designie nie chodzi tylko o to, *co* się animuje, ale *kiedy*. Sekwencje animacji to uporządkowane serie zdarzeń – np. tytuł pojawia się pierwszy, następnie tekst, a na końcu przycisk. Dzięki nim użytkownik odbiera interfejs jako spójny i intuicyjny, a przekaz jest łatwiejszy do przyswojenia.

1. Dlaczego sekwencje?

Jeśli wszystkie elementy pojawiają się jednocześnie, interfejs wydaje się „sztywny” i trudny do odczytania. Sekwencje pozwalają sterować rytmem: budują napięcie, podkreślają hierarchię treści i sprawiają, że UI „prowadzi wzrok”.

2. Sekwencja ręczna – z użyciem klas

Najprostszy sposób: każdemu elementowi przypisujesz klasę z innym animation-delay:

<section class="intro">
  <h2 class="fade-in delay-1">Witamy!</h2>
  <p class="fade-in delay-2">Poznaj naszą ofertę.</p>
  <button class="fade-in delay-3">Zobacz więcej</button>
</section>

.fade-in {
  animation: fadeInUp 0.5s ease-out forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }

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

To podejście jest elastyczne i proste, ale wymaga ręcznego dodania klas.

3. Sekwencja automatyczna – z użyciem :nth-child

Można automatycznie przypisać opóźnienia w CSS, np. dla listy elementów:

.animated-list li {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}

.animated-list li:nth-child(1) {
  animation-delay: 0.1s;
}

.animated-list li:nth-child(2) {
  animation-delay: 0.3s;
}

.animated-list li:nth-child(3) {
  animation-delay: 0.5s;
}

Dzięki temu HTML może być „czysty”, bez klas z opóźnieniami:

<ul class="animated-list">
  <li>Szybkość</li>
  <li>Wydajność</li>
  <li>Bezpieczeństwo</li>
</ul>

4. Sekwencje z różnymi animacjami

Sekwencja nie musi polegać tylko na opóźnieniach – możesz też animować różne elementy różnymi efektami:

• tytuł: fadeInUp
• tekst: fadeIn
• CTA: slideIn lub bounceIn

Ważne, by nie przesadzać – najlepiej 1–2 typy animacji w ramach jednej sekwencji, z tym samym rytmem.

5. Sekwencje animacji przy przewijaniu (koncepcyjnie)

W przypadku długich stron możesz łączyć sekwencje z mechanizmem IntersectionObserver (po stronie JavaScriptu), by animacje wchodziły dopiero po „wejściu” sekcji na ekran.
Z perspektywy CSS oznacza to po prostu dodanie odpowiedniej klasy w JS, np. .fade-in delay-2 – cały kod CSS może pozostać taki, jak wcześniej.

Ćwiczenie

Stwórz komponent .step-list, który zawiera 4 kroki (np. „Wybierz plan” → „Zarejestruj się” → „Skonfiguruj konto” → „Korzystaj”).

• Kroki powinny pojawiać się jeden po drugim (co 200ms opóźnienia)
• Każdy krok powinien delikatnie wjeżdżać z dołu (translateY) i zanikać (opacity)
• Zastosuj @keyframes i :nth-child – bez klas w HTML

Dobre praktyki

• Stosuj spójne tempo – jeśli jedna sekwencja zaczyna się co 200ms, nie zmieniaj tego co krok
• Nie przeciążaj użytkownika – sekwencje powinny być szybkie i logiczne, nie pokazowe
• Stosuj animation-fill-mode: forwards – by uniknąć „migania” elementów po zakończeniu animacji

Wniosek

Sekwencje animacji to podstawa estetycznego i intuicyjnego UI. Pozwalają nadawać ruchowi sens – nie tylko wygląd. Dobrze zaprojektowana sekwencja prowadzi użytkownika przez treść krok po kroku, wzmacniając przekaz i zwiększając zrozumiałość interfejsu.