Właściwość CSSPrzejścia
transition-delay
Ustala, po jakim czasie od zmiany wartości zaczyna się przejście.
- Wartość domyślna
0s- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.transitionDelay = "0.2s"
Przykład
#CSS
.tooltip {
opacity: 0;
transition: opacity 0.2s;
}
.trigger:hover .tooltip {
opacity: 1;
transition-delay: 0.4s;
}HTML przykładu
<style>
.tip { opacity: 0; transition: opacity .2s; margin-left: 8px; color: #a78bfa; }
.tip-wrap:hover .tip { opacity: 1; transition-delay: .4s; }
</style>
<p class="tip-wrap stage" style="margin: 0">Najedź i poczekaj chwilę <span class="tip">Podpowiedź pojawia się z opóźnieniem</span></p>Podgląd
Definicja i zastosowanie
#Właściwość transition-delay opóźnia start przejścia. Wartość zmienia się dopiero po upływie podanego czasu, a potem animuje zgodnie z transition-duration.
Opóźnienia pozwalają układać choreografię: najpierw zmienia się kolor, a chwilę później rusza element, albo kolejne pozycje menu pojawiają się jedna po drugiej.
Wartość ujemna rozpoczyna przejście tak, jakby trwało już od jakiegoś czasu, więc zaczyna się od środka.
Składnia
#Składnia
transition-delay: <czas> [, <czas>]*;Wartości
#Wartości w praktyce
#0s
Przejście rusza od razu.
.demo { transition-delay: 0s; }0.5s
Pół sekundy oczekiwania przed ruchem.
.demo { transition-delay: 0.5s; }0s, 0.5s
Ruch od razu, kolor zmienia się z opóźnieniem.
.demo { transition-delay: 0s, 0.5s; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Krótkie opóźnienie podpowiedzi (300–500 ms) zapobiega jej miganiu, gdy kursor tylko przelatuje nad elementem.
- Różne opóźnienia dla kolejnych elementów listy tworzą efekt kaskady.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.