Właściwość CSSAnimacje
animation-delay
Ustala, po jakim czasie animacja się zaczyna.
- Wartość domyślna
0s- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationDelay = "0.3s"
Przykład
#CSS
.list li {
animation: fade-up 0.5s ease-out both;
}
.list li:nth-child(2) { animation-delay: 0.1s; }
.list li:nth-child(3) { animation-delay: 0.2s; }HTML przykładu
<style>
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
.casc li { animation: fade-up .5s ease-out both; }
.casc li:nth-child(2) { animation-delay: .1s; }
.casc li:nth-child(3) { animation-delay: .2s; }
</style>
<ul class="casc" style="margin: 0;"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>Podgląd
Definicja i zastosowanie
#Właściwość animation-delay opóźnia start animacji. Przez czas opóźnienia element wygląda tak, jakby animacji nie było, chyba że animation-fill-mode ustawiono na backwards lub both.
Różne opóźnienia dla kolejnych elementów to prosty sposób na efekt kaskady, na przykład kropki wskaźnika ładowania pulsujące jedna po drugiej.
Wartość ujemna sprawia, że animacja startuje od razu, ale jakby trwała już od jakiegoś czasu. Przydaje się, gdy zapętlone animacje wielu elementów nie powinny zaczynać się w tym samym punkcie.
Składnia
#Składnia
animation-delay: <czas> [, <czas>]*;Wartości
#Wartości w praktyce
#0s
Wszystkie kropki podskakują razem.
.dot { animation-delay: 0s; }kaskada
Każda kolejna kropka startuje nieco później.
.dot:nth-child(2) { animation-delay: 0.15s; }
.dot:nth-child(3) { animation-delay: 0.3s; }-0.6s
Środkowa kropka zaczyna od połowy cyklu.
.demo { animation-delay: -0.6s; }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
#- Przy opóźnionych animacjach wejścia ustaw
animation-fill-mode: both, żeby element nie mignął przed startem. - Kaskady trzymaj krótkie, 50–100 ms między elementami. Długie czekanie na ostatni element męczy.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.