Kurs HTML

Do czego służy animation-delay?

Właściwość animation-delay określa **czas oczekiwania przed rozpoczęciem pierwszego cyklu animacji** po jej zastosowaniu do elementu. Działa analogicznie do transition-delay dla przejść.

Dzięki tej właściwości możemy precyzyjnie kontrolować moment startu animacji, tworzyć sekwencje lub synchronizować animacje z innymi zdarzeniami.

Składnia i wartości

Właściwość animation-delay przyjmuje jedną lub więcej wartości czasu, oddzielonych przecinkami, odpowiadających kolejnym animacjom zdefiniowanym w animation-name.

animation-delay: <czas> [, <czas>]*;Kopiuj

• <czas>: Wartość czasu określająca opóźnienie. Może być **dodatnia, ujemna lub zero**. Jednostki to sekundy (s) lub milisekundy (ms).

Interpretacja wartości:

• Wartość dodatnia (np. 1.5s): Animacja rozpocznie się po upływie 1.5 sekundy od momentu jej zastosowania do elementu.
• Zero (0s, wartość domyślna): Animacja rozpocznie się natychmiast.
• Wartość ujemna (np. -1s): Animacja rozpocznie się natychmiast, ale będzie wyglądała, jakby już trwała od 1 sekundy. Jeśli animation-duration wynosi 3s, a animation-delay to -1s, animacja wystartuje od stanu odpowiadającego 1/3 postępu i potrwa tylko pozostałe 2s do końca pierwszego cyklu.

Przykład:

@keyframes pojawienie {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element1 {
  animation-name: pojawienie;
  animation-duration: 1s;
  /* Rozpocznij animację po 0.5 sekundy */
  animation-delay: 0.5s; 
}

.element2 {
  animation-name: animacjaA, animacjaB;
  animation-duration: 2s, 3s;
  /* Opóźnij animację A o 1s, a animację B o 2.5s */
  animation-delay: 1s, 2.5s; 
}

.element3 {
  animation-name: pojawienie;
  animation-duration: 2s;
  /* Rozpocznij natychmiast, ale od połowy (stan jak po 1s) */
  animation-delay: -1s;
}
Kopiuj

Jeśli lista opóźnień jest krótsza niż lista nazw animacji, wartości są powtarzane.

Zastosowania animation-delay

• Sekwencjonowanie animacji: Podobnie jak w przejściach, można tworzyć efekt kaskadowy, opóźniając start animacji dla kolejnych elementów.
• Synchronizacja: Dopasowanie startu animacji do innych zdarzeń na stronie lub do zakończenia innych animacji.
• Efekty specjalne: Ujemne opóźnienie pozwala "wskoczyć" w środek animacji, co może być użyteczne np. przy dynamicznym dodawaniu animowanych elementów do strony.
• Tworzenie przerw między powtórzeniami: Chociaż animation-delay dotyczy tylko pierwszego cyklu, można symulować przerwy, tworząc klatkę kluczową na końcu animacji (np. 100%), która utrzymuje stan końcowy przez pewien czas, zanim animacja się zresetuje (jeśli jest powtarzana). Jednak do bardziej złożonych przerw lepiej nadają się inne techniki lub JavaScript.

Przykład: Kaskadowe pojawianie się liter

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

span {
  opacity: 0;
  transform: translateY(10px);
  display: inline-block; /* Ważne dla transformacji */
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; /* Utrzymaj stan końcowy */
}

/* Opóźnienia dla kolejnych liter (można zautomatyzować np. w JS/SCSS) */
span:nth-child(1) { animation-delay: 0.1s; }
span:nth-child(2) { animation-delay: 0.2s; }
span:nth-child(3) { animation-delay: 0.3s; }
/* ... */
Kopiuj