Atrybut animation-delay CSS

Definicja i użycie

animation-delay Atrybut definiuje, kiedy animacja ma się zacząć.

Wartości animation-delay wyrażone w sekundach lub milisekundach.

Wskazówka:Zezwala na wartości ujemne, -2s sprawia, że animacja rozpoczyna się natychmiast, ale pomija 2 sekundy wchodząc w cykl animacji.

Zobacz również:

CSS3 Tutorial:Animacje CSS

HTML DOM Reference Manual:animationDelay property

Przykład

Przykład 1

Czekaj przez dwie sekundy, a następnie rozpoczynaj animację:

div {
  animation-delay: 2s;
}

Spróbuj sam

Przykład 2

Wartości ujemne, proszę zauważ, że animacja pomija 2 sekundy i wchodzi w cykl animacji:

div {
  animation-delay: -2s;
}

Spróbuj sam

CSS syntax

animation-delay: time;
Wartość Opis Test
time opcjonalnie. Definiuje czas oczekiwania przed rozpoczęciem animacji, wyrażony w sekundach lub milisekundach. Domyślna wartość to 0. Test

Techniczne szczegóły

Domyślna wartość: 0
Inheritance: no
Wersja: CSS3
JavaScript syntax: object.style.animationDelay="2s"

Wsparcie przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Liczby z -webkit-, -moz- lub -o- jako prefiksem oznaczają pierwszą wersję, która ich używa.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-