Kurs HTML

Do czego służy transition-delay?

Właściwość transition-delay pozwala na **opóźnienie rozpoczęcia przejścia CSS**. Zamiast startować natychmiast po zmianie wartości animowanej właściwości, przejście rozpocznie się dopiero po upływie określonego czasu opóźnienia.

Jest to przydatne do tworzenia bardziej złożonych sekwencji animacji lub do zapewnienia, że przejście nie rozpocznie się zbyt wcześnie, np. przy przypadkowym, krótkim najechaniu myszą.

Składnia i wartości

Właściwość transition-delay przyjmuje jedną lub więcej wartości czasu, oddzielonych przecinkami. Każda wartość odpowiada kolejnej właściwości zdefiniowanej w transition-property.

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

• <czas>: Wartość czasu określająca opóźnienie przed startem przejścia. Może być to wartość **dodatnia, ujemna lub zero**. Jednostki są takie same jak dla transition-duration:
  • s (sekundy): Np. 0.2s, 1s.
  • ms (milisekundy): Np. 150ms, 1200ms.

Interpretacja wartości:

• Wartość dodatnia (np. 0.5s): Przejście rozpocznie się po upływie 0.5 sekundy od momentu zmiany właściwości.
• Zero (0s, wartość domyślna): Przejście rozpocznie się natychmiast.
• Wartość ujemna (np. -0.5s): Przejście rozpocznie się natychmiast, ale będzie wyglądało, jakby już trwało od 0.5 sekundy. Jeśli całkowity czas trwania (transition-duration) wynosi 1s, a opóźnienie -0.5s, animacja rozpocznie się od połowy i potrwa tylko pozostałe 0.5s.

Przykłady:

.element1 {
  transition-property: background-color;
  transition-duration: 0.4s;
  /* Rozpocznij przejście koloru tła po 0.1 sekundy */
  transition-delay: 0.1s; 
}

.element2 {
  transition-property: width, opacity;
  transition-duration: 0.5s, 0.3s;
  /* Opóźnij przejście szerokości o 200ms, a przezroczystości o 400ms */
  transition-delay: 200ms, 400ms; 
}

.element3 {
  transition-property: transform, color;
  transition-duration: 1s;
  /* Rozpocznij transformację natychmiast, ale opóźnij zmianę koloru o 0.5s */
  transition-delay: 0s, 0.5s; 
}

.element4 {
  transition-property: all;
  transition-duration: 0.5s;
  /* Rozpocznij natychmiast, ale od połowy animacji */
  transition-delay: -0.25s;
}
Kopiuj

Podobnie jak w przypadku transition-duration i transition-timing-function, jeśli lista opóźnień jest krótsza niż lista właściwości, wartości są powtarzane.

Zastosowania transition-delay

• Sekwencjonowanie animacji: Można tworzyć efekt "kaskadowy", gdzie różne elementy lub różne właściwości tego samego elementu zaczynają animować się jedna po drugiej.
• Unikanie przypadkowych aktywacji: Opóźnienie przejścia przy :hover może zapobiec irytującym animacjom, gdy użytkownik tylko szybko przesunie kursor nad elementem.
• Synchronizacja z innymi zdarzeniami: Opóźnienie może być użyte do zsynchronizowania startu przejścia CSS z innymi zdarzeniami na stronie.
• Efekty specjalne z ujemnym opóźnieniem: Ujemne opóźnienie pozwala "wskoczyć" w środek animacji, co może być przydatne w specyficznych scenariuszach, np. przy wznawianiu przerwanej animacji.

Przykład: Kaskadowe pojawianie się elementów listy

ul li {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

ul:hover li {
  opacity: 1;
  transform: translateY(0);
}

/* Opóźnienia dla kolejnych elementów */
ul li:nth-child(1) { transition-delay: 0.1s; }
ul li:nth-child(2) { transition-delay: 0.2s; }
ul li:nth-child(3) { transition-delay: 0.3s; }
ul li:nth-child(4) { transition-delay: 0.4s; }
/* itd. */
Kopiuj

W tym przykładzie, po najechaniu na listę ul, jej elementy li będą pojawiać się kolejno, jeden po drugim, dzięki różnym wartościom transition-delay.