Animații CSS. Întârziere animație.

Întârziere animație (Delay an Animation)

Proprietatea animation-delay specifică o întârziere pentru începerea unei animații.

Următorul exemplu are o întârziere de 2 secunde înainte de a începe animația:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

De asemenea, sunt permise valori negative. Dacă utilizați valori negative, animația va începe ca și cum ar fi jucat deja N secunde.

În următorul exemplu, animația va începe ca și cum ar fi jucat deja timp de 2 secunde:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}